<div id="mainTwo" v-cloak>
	<div class="animated fadeIn">
		<div class="row col s12 card-panel white dv-content" style="margin-top: 75px;">
			<h5>{{traducirFrase("Busqueda de Leads/Registros")}}</h5>
			<div id="spinner" v-if="cargando">
				<center><img src="<?=IMG_ADMIN;?>spinner.gif" id='barrita'></center>
			</div>
			<div class="row no-bottom dv-flex dv-centered">
				<div class="col dv-flex-grow-1 input-field">
					<select v-model="buscarPor" class="browser-default">
						<optgroup v-for="grupo in gruposSelect" :label="grupo.grupo">
							<option v-for="op in grupo.opciones" :value="op.value">{{op.label}}</option>
						</optgroup>
					</select>
					<label class="active">{{traducirFrase("Buscar por")}}</label>
				</div>
				<div class="col dv-flex-grow-1 input-field" v-if="buscarPor === 'detailed'">
					<select v-model="valor.user" class="browser-default">
						<option :value="''">{{traducirFrase("Sin seleccionar")}}</option>
						<option v-for="op in usuarios" :value="op.value">{{op.label}}</option>
					</select>
					<label class="active">{{traducirFrase("Usuario")}}</label>
				</div>
				<div class="col dv-flex-grow-1 input-field" v-if="buscarPor === 'detailed'">
					<select v-model="valor.list_id" class="browser-default">
						<option :value="''">{{traducirFrase("Sin seleccionar")}}</option>
						<option v-for="op in listas" :value="op.value">{{op.label}}</option>
					</select>
					<label class="active">{{traducirFrase("Lista")}}</label>
				</div>
				<div class="col dv-flex-grow-1 input-field" v-if="buscarPor === 'detailed'">
					<input type="text" v-model="valor.status" :placeholder="traducirFrase('Estado')" />
					<label>{{traducirFrase("Estado")}}</label>
				</div>
				<div class="col dv-flex-grow-1 input-field" v-if="buscarPor !== 'detailed'">
					<input type="text" v-model="valor" id="campo-busqueda" v-bind:placeholder="traducirFrase('Valor para buscar')" />
					<label>{{traducirFrase("Busqueda")}}</label>
				</div>
				<div class="col dv-flex-grow-1 input-field" v-if="buscarPor === 'phone_number'">
					<p>
						<label>
							<input type="checkbox" v-model="telefonoAlterno" />
							<span>{{traducirFrase("Telefonos alternos")}}</span>
						</label>
					</p>
				</div>
				<div class="col">
					<button class="waves-effect waves-light btn teal" @click="load()">
						{{traducirFrase("Buscar")}}
					</button>
				</div>
			</div>
			<div class="row">
				<div class="row col s12">
					<table-dialvox
						:headers="headers"
						:data="data"
						:options="options"
						:hsearch="true"
						@details="mostrarDetalles"
					/>
				</div>
			</div>
			<div class="row" v-if="dataDids.length !== 0">
				<div class="col s12">
					<h6>
						{{traducirFrase("Registros de DID")}}
					</h6>
				</div>
				<div class="row col s12">
					<table-dialvox
						:headers="headersDid"
						:data="dataDids"
						:hsearch="true"
					/>
				</div>
			</div>
		</div>
	</div>

	<?php require_once "modals" . DIRECTORY_SEPARATOR . "details.php";?>

</div>
<!-- END MAIN -->
<!-- ================================================
    Scripts
    ================================================ -->
<?php require_once "script.php";?>