<modal-dialvox v-model="targets.listEdit" send="Guardar" small @submit="addOpcion('editarOpcion', 'listEdit')" :disabled="!validFormOpciones">
    <h4>{{traducirFrase("Editar opcion")}}</h4>
    <br><br>
    <div class="container">
    <div class="input-field">
            <label for="edito_opcion" class="active">
                {{traducirFrase("Opción")}}
            </label>
            <select id="edito_opcion" class="browser-default" v-model="second.opcion" placeholder="Opción" disabled>
                <option :value="''" selected>
                    {{traducirFrase("Selecciona una opción")}}
                </option>
                <option v-for="item in opcionesDisponibles" :key="item.value" :value="item.value">
                    {{item.label}}
                </option>
            </select>
        </div>
        <div class="input-field">
            <input type="text" id="edito_descripcion" v-model="second.descripcion" :placeholder="traducirFrase('Descripción')">
            <label for="edito_descripcion">{{traducirFrase("Descripción")}}</label>
        </div>
        <div class="input-field">
            <label for="edito_ruta" class="active">
                {{traducirFrase("Ruta")}}
            </label>
            <select id="edito_ruta" class="browser-default" v-model="second.ruta" :placeholder="traducirFrase('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="edito_audio" class="active">
                {{traducirFrase("Audio")}}
            </label>
            <select id="edito_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="edito_telefono" v-model="second.valor" placeholder="Telefono">
            <label for="edito_telefono">{{traducirFrase("Telefono")}}</label>
        </div>
        <div class="input-field" v-if="second.ruta === 'EXTENSION'">
            <label for="edito_extension" class="active">
                {{traducirFrase("Extension")}}
            </label>
            <select id="edito_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="edito_contexto" class="active">
                {{traducirFrase("Contexto")}}
            </label>
            <select id="edito_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="edito_did" class="active">
                {{traducirFrase("Telefono DID")}}
            </label>
            <select id="edito_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="edito_menu" class="active">
                {{traducirFrase("Menú")}}
            </label>
            <select id="edito_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="edito_voicemail" v-model="second.valor" placeholder="Buzón de vox">
            <label for="edito_voicemail">{{traducirFrase("Buzón de vox")}}</label>
        </div>
        <div class="input-field" v-if="second.ruta === 'INGROUP'">
            <label for="edito_ingroup" class="active">
                {{traducirFrase("Grupo de entrada")}}
            </label>
            <select id="edito_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="edito_handleMethod" class="active">
                {{traducirFrase("Metodo de marcado")}}
            </label>
            <select id="edito_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="edito_searchMethod" class="active">
                {{traducirFrase("Metodo de busqueda")}}
            </label>
            <select id="edito_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="edito_campana" class="active">
                {{traducirFrase("Campaña")}}
            </label>
            <select id="edito_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="edito_lista" class="active">
                {{traducirFrase("Lista")}}
            </label>
            <select id="edito_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>
