<!-- 
    modalChat : boolean
    crearSala : () => void // Funcion que creara la sala
-->
<modal-dialvox v-model="modalChat" send="Guardar" cancel="Cancelar" small @submit="crearSala">
    <div class="modal-header">
        <h4 class="modal-title">{{tituloModal}} nuevo chat</h4>
    </div>
    <div class="modal-body">
        <div class="row">
            <div class="input-field col s12">
                <!-- nombreSala : string -->
                <input type="text" id="nombre-chat" v-model="nombreSala">
                <label for="nombre-chat">Nombre de la sala</label>
            </div>
            <div class="input-field col s12">
                <!-- 
                    participantesSala : string[]
                 -->
                <select id="participantesSala" v-model="participantesSala" multiple>
                    <option :value="null" disabled="disabled" selected="selected">Selecciona los participantes</option>
                    <!-- 
                        Sustituir value y label por los campos que se guardan
                        y muestran respectivamente en el select
                    -->
                    <option v-for="participante in participantes" :value="participante.value">
                        {{ paticipante.label }}
                    </option>
                </select>
                <label for="partisipantesSala">
                    Participantes
                </label>
            </div>
        </div>
    </div>
</modal-dialvox>