<div class="container animated fadeIn" v-if="targets.addRango">
    <div class="row">
        <div class="dv-flex col">
            <button class="button btn-flat waves-effect waves-light" @click="targets.addRango = false"><i class="material-icons">arrow_back</i></button>
            <h6 class="dv-flex-grow-1">
                {{traducirFrase("Agregar Rango")}}
            </h6>
        </div>
    </div>
    <div class="row dv-flex dv-centered noBottomMargin">
        <div class="input-field col dv-flex-grow-1">
            <p>
                <label>
                    <input type="checkbox" v-model="rango.incluido_IzqBool" class="archivoInput"/>
                    <span>{{traducirFrase("Incluir Límite Izquierdo")}}</span>
                </label>
            </p>
        </div>
        <div class="dv-flex-grow-1 input-field col">
            <input type="number" v-bind:placeholder="traducirFrase('Límite Izquierdo')" v-model="rango.limite_Izq" :disabled = "rango.inlcuido_Izq">
        </div>
    </div>
    <div class="row dv-flex dv-centered noBottomMargin">
        <div class="input-field col dv-flex-grow-1">
            <p>
                <label>
                    <input type="checkbox" v-model="rango.incluido_DerBool" class="archivoInput"/>
                    <span>{{traducirFrase("Incluir Límite Derecho")}}</span>
                </label>
            </p>
        </div>
        <div class="dv-flex-grow-1 input-field col">
            <input type="number" v-bind:placeholder="traducirFrase('Límite Derecho')" v-model="rango.limite_Der" :disabled = "rango.inlcuido_Der">
        </div>
    </div>
    <div class="row dv-flex dv-centered noBottomMargin">
        <div class="input-field col dv-flex-grow-1">
            <select name="" id="selectorTipoAccion" class="browser-default" v-model="rango.tipoDeAccion">
                <option :value="1">{{traducirFrase("Colgar")}}</option>
                <option :value="2">{{traducirFrase("Transferir")}}</option>
                <option :value="3">{{traducirFrase("Pregunta")}}</option>
                <option :value="4">{{traducirFrase("Decisión")}}</option>
            </select>
            <label for="selectorTipoAccion" class="active">{{traducirFrase("Acción por defecto")}}</label>
        </div>
        <div class="dv-flex-grow-1 input-field col" v-if="rango.tipoDeAccion === 2">
            <input type="text" id="telefonoInput" v-model="rango.valorDeAccion">
            <label for="telefonoInput" class="active">{{traducirFrase("Teléfono")}}</label>
        </div>
        <div class="dv-flex-grow-1 input-field col" v-if="rango.tipoDeAccion === 3">
            <select name="" id="selectorValorPregunta" class="browser-default" v-model="rango.valorDeAccion">
                <option v-for="v in preguntas" :key="v.value" :value="v.value">
                        {{ v.label }}
                </option>
            </select>
            <label for="selectorValorPregunta" class="active">{{traducirFrase("Pregunta")}}</label>
        </div>
        <div class="dv-flex-grow-1 input-field col" v-if="rango.tipoDeAccion === 4">
            <select name="" id="selectorValorDecision" class="browser-default" v-model="rango.valorDeAccion">
                <option v-for="v in decisiones" :key="v.value" :value="v.value">
                        {{ v.label }}
                </option>
            </select>
            <label for="selectorValorDecision" class="active">{{traducirFrase("Decisión")}}</label>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <button class="btn waves-effect waves-light blue darken-1" @click="addRango">
                {{traducirFrase("Agregar")}}
            </button>
        </div>
    </div>
</div>