<modal-dialvox v-model="targets.listAdd" small @submit="addOpcion('crearOpcion', 'listAdd')" :disabled="!validFormOpciones">
<h4>{{traducirFrase("Registrar opción")}}</h4>
    <br><br>
    <div class="container">
        <div class="input-field">
            <label for="addo_opcion" class="active">
                {{traducirFrase("Opción")}}
            </label>
            <select id="addo_opcion" class="browser-default" v-model="second.opcion" placeholder="Opción">
                <option :value="''" selected>
                    {{traducirFrase("Selecciona una opción")}}
                </option>
                <option v-for="item in opcionesDisponibles" :key="item.value" :value="item.value">
                    {{ item.label ? traducirFrase(item.label) : item.label }}
                </option>
            </select>
        </div>
        <div class="input-field">
            <input type="text" id="addo_descripcion" v-model="second.descripcion" placeholder="Descripción">
            <label for="addo_descripcion">{{traducirFrase("Descripción")}}</labez>
        </div>
        <div class="input-field">
            <label for="addo_ruta" class="active">
                {{traducirFrase("Ruta")}}
            </label>
            <select id="addo_ruta" class="browser-default" v-model="second.ruta" placeholder="Ruta">
                <option :value="'HANGUP'" selected>
                    {{traducirFrase("Colgar")}}
                </option>
                <option :value="'PHONE'" >
                    {{traducirFrase("Telefono")}}
                </option>
                <option :value="'EXTENSION'" >
                    {{traducirFrase("Extensión")}}
                </option>
                <option :value="'DID'" >
                    {{traducirFrase("Telefono DID")}}
                </option>
                <option :value="'INGROUP'" >
                    {{traducirFrase("Grupo de entrada")}}
                </option>
                <option :value="'CALLMENU'" >
                    {{traducirFrase("Menú")}}
                </option>
                <option :value="'VOICEMAIL'" >
                    {{traducirFrase("Buzón de voz")}}
                </option>
            </select>
        </div>
        <div class="input-field" v-if="second.ruta === 'HANGUP'">
            <label for="addo_audio" class="active">
                {{traducirFrase("Audio")}}
            </label>
            <select id="addo_audio" class="browser-default" v-model="second.valor" placeholder="Audio">
                <option :value="''" selected>
                    {{traducirFrase("Sin audio")}}
                </option>
                <option v-for="audio in audiosOpciones" :key="audio.value" :value="audio.value">
                    {{audio.label}}
                </option>
            </select>
        </div>
        <div class="input-field" v-if="second.ruta === 'PHONE'">
            <input type="text" id="addo_telefono" v-model="second.valor" placeholder="Telefono">
            <label for="addo_telefono">{{traducirFrase("Telefono")}}</labez>
        </div>
        <div class="input-field" v-if="second.ruta === 'EXTENSION'">
            <label for="addo_extension" class="active">
                {{traducirFrase("Extension")}}
            </label>
            <select id="addo_extension" class="browser-default" v-model="second.valor" placeholder="Extension">
                <option :value="''" selected>
                    {{traducirFrase("Sin extension")}}
                </option>
                <option v-for="extension in extensiones" :key="extension.value" :value="extension.value">
                    {{extension.label}}
                </option>
            </select>
        </div>
        <div class="input-field" v-if="second.ruta === 'EXTENSION'">
            <label for="addo_contexto" class="active">
                {{traducirFrase("Contexto")}}
            </label>
            <select id="addo_contexto" class="browser-default" v-model="second.contexto" placeholder="Contexto">
                <option :value="''" selected>
                    {{traducirFrase("Sin contexto")}}
                </option>
                <option v-for="item in contextos" :key="item.value" :value="item.value">
                    {{item.label}}
                </option>
            </select>
        </div>
        <div class="input-field" v-if="second.ruta === 'DID'">
            <label for="addo_did" class="active">
                {{traducirFrase("Telefono DID")}}
            </label>
            <select id="addo_did" class="browser-default" v-model="second.valor" placeholder="Telefono DID">
                <option :value="''" selected>
                    {{traducirFrase("Sin did")}}
                </option>
                <option v-for="did in dids" :key="did.value" :value="did.value">
                    {{did.label}}
                </option>
            </select>
        </div>
        <div class="input-field" v-if="second.ruta === 'CALLMENU'">
            <label for="addo_menu" class="active">
                {{traducirFrase("Menú")}}
            </label>
            <select id="addo_menu" class="browser-default" v-model="second.valor" placeholder="Menú">
                <option :value="''" selected>
                    {{traducirFrase("Sin menú")}}
                </option>
                <option v-for="menu in menus" :key="menu.value" :value="menu.value">
                    {{menu.label}}
                </option>
            </select>
        </div>
        <div class="input-field" v-if="second.ruta === 'VOICEMAIL'">
            <input type="text" id="addo_voicemail" v-model="second.valor" placeholder="Buzón de vox">
            <label for="addo_voicemail">{{traducirFrase("Buzón de voz")}}</label>
        </div>
        <div class="input-field" v-if="second.ruta === 'INGROUP'">
            <label for="addo_ingroup" class="active">
                {{traducirFrase("Grupo de entrada")}}
            </label>
            <select id="addo_ingroup" class="browser-default" v-model="second.valor" placeholder="Grupo de entrada">
                <option :value="''" selected>
                    {{traducirFrase("Sin grupo de entrada")}}
                </option>
                <option v-for="item in gruposEntrada" :key="item.value" :value="item.value">
                    {{item.label}}
                </option>
            </select>
        </div>
        <div class="input-field" v-if="second.ruta === 'INGROUP'">
            <label for="addo_handleMethod" class="active">
                {{traducirFrase("Metodo de manejo")}}
            </label>
            <select id="addo_handleMethod" class="browser-default" v-model="second.handleMethod" placeholder="Metodo de marcado">
                <option v-for="elem in metodosManejo" :value="elem.value" :key="elem.value">
                    {{elem.label}}
                </option>
            </select>
        </div>
        <div class="input-field" v-if="second.ruta === 'INGROUP'">
            <label for="addo_searchMethod" class="active">
                {{traducirFrase("Metodo de busqueda")}}
            </label>
            <select id="addo_searchMethod" class="browser-default" v-model="second.searchMethod" placeholder="Metodo de busqueda">
                <option v-for="elem in metodosBusqueda" :value="elem.value" :key="elem.value">
                    {{elem.label}}
                </option>
            </select>
        </div>
        <div class="input-field" v-if="second.ruta === 'INGROUP'">
            <label for="addo_campana" class="active">
                {{traducirFrase("Campaña")}}
            </label>
            <select id="addo_campana" class="browser-default" v-model="second.campana" placeholder="Campaña">
                <option :value="''" selected>
                    {{traducirFrase("Sin campana")}}
                </option>
                <option v-for="item in campanas" :key="item.value" :value="item.value">
                    {{item.label}}
                </option>
            </select>
        </div>
        <div class="input-field" v-if="second.ruta === 'INGROUP'">
            <label for="addo_lista" class="active">
                {{traducirFrase("Lista")}}
            </label>
            <select id="addo_lista" class="browser-default" v-model="second.lista" placeholder="Lista">
                <option :value="''" selected>
                    {{traducirFrase("Sin lista")}}
                </option>
                <option v-for="item in listas" :key="item.value" :value="item.value">
                    {{item.label}}
                </option>
            </select>
        </div>
    </div>
</modal-dialvox>
