<div id="formuUp" class="modal">
    <div class="modal-content">
        <h5>Subir registro a campaña de Whatsapp</h5>
        <div class="modal-body">
            <div class="row ">
                <div class="col s12 m10 l10 xl10 offset-m1 offset-l1 offset-xl-1">
                    <p class="caption" style="font-size: 0.9em;">Seleccione su archivo en formato CSV delimitado por comas. Los nombres de las columnas deben ser alfanumericos, sin acentos ni caracteres especiales. Recuerde que una de las columnas debe llamarse Telefono y contener los números telefonicos de destino. Si los números telefonicos requiren un codigo de pais una de las columnas debe llamarse Codigo Pais con o sin espacio<a href="/public/template/template.csv" target="blank"> Descargar plantilla de ejemplo</a></p>
                    <div class="input-field file-field">
                        <div class="btn btn-small">
                            <span>Archivo</span>
                            <input type="file" id="archivo">
                        </div>
                        <div class="file-path-wrapper">
                            <input type="text" class="file-path" placeholder="Selecciona un archivo">
                        </div>
                    </div>
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary" type="button" v-on:click.prevent="leerArchivo()">
                            Subir
                        </button>
                    </div>
                    <div v-if="fileRead">
                        <div class="row">
                            <button class="btn btn-small waves-effect" v-for="boton in botones" v-on:click="agregarCampo(boton.value)">{{boton.value}}</button>
                        </div>
                        <br>
                        <div class="row">
                            <div class="input-field">
                                <textarea id="plantillaMensaje" cols="30" rows="10" class="materialize-textarea" v-on:keyup="genMessagesPreview()"></textarea>
                                <label for="plantillaMensaje">Mensaje</label>
                            </div>
                            <div class="input-field file-field">
                                <div class="btn btn-small">
                                    <span>Adjunto</span>
                                    <input type="file" id="archivoAdjunto">
                                </div>
                                <div class="file-path-wrapper">
                                    <input type="text" class="file-path" placeholder="Selecciona un archivo">
                                </div>
                            </div>
                        </div>
                        <br>
                        <div class="row">
                            <div class="col s12">
                                <span class="caption">Previsualizacion</span>
                            </div>
                            <br>
                            <div class="col s12 grey lighten-4" v-if="generatedMessages.length > 0">
                                <span class="caption" v-for="genMess in generatedMessages" v-html="genMess"></span>
                            </div>
                        </div>
                        <br>
                        <button class="modal-close btn btn-danger mb-2 mt-2 ml-2 mr-2 col-sm-12" type="button" v-on:click.prevent="enviarMensajes()">
                            Enviar
                        </button>
                        <!-- <form id="formGenMess" v-on:submit.prevent="enviarMensajes()" enctype="multipart/form-data" method="POST">
                        <div class="input-group d-flex justify-content-right">
                            <textarea class="form-control" id="mensajeGenCSV" v-model="mensaje" v-on:keyup="genMessagesPreview()"></textarea>
                        </div>
                        <div class="col-sm-21 mt-2 mb-2">
                            <!-- <p class="text-right text-secondary">Longitud del mensaje {{peorCaso}}</p>
                        </div>
                        <div class="btn">
                            <span>{{i18n.gettext("Archivo CSV")}}</span>
                            <input type="file" id='archivoAdjunto' name="csv">
                        </div>
                        <div class="file-path-wrapper">
                            <input class="file-path validate" type="text">
                        </div>

                        <div class="input-group justify-content-center row">
                            <button class="btn btn-outline-success mb-2 mt-2 ml-2 mr-2 col-sm-3" type="submit">
                                Enviar
                            </button>
                            <button class="modal-close btn btn-danger mb-2 mt-2 ml-2 mr-2 col-sm-3" type="button" v-on:click="cancelButtonCSV()">
                                Cancelar
                            </button>
                        </div>
                        </form>
                        <br>
                        <ul class="list-group-flush list-group-custom" v-if="generatedMessages.length > 0">
                            <li class="list-group-item text-dark">Previsualización de los mensajes</li>
                            <li class="list-group-item text-secondary" v-for="genMess in generatedMessages" v-html="genMess"></li>
                        </ul> -->
                    </div>
                    <div v-else>
                        <div class="container">
                            <h6 class="blue-text text-darken-2 caption">No se ha leído ningun archivo aún</h6>
                        </div>
                    </div>
                    <button class="modal-close btn btn-danger mb-2 mt-2 ml-2 mr-2 col-sm-12" type="button" v-on:click="cancelButtonCSV()">
                        Cancelar
                    </button>
                    <div id="message"></div>

                </div>
            </div>
        </div>
    </div>
</div>
