<form action="" @submit.prevent="guardarEMAIL" id="formEMAIL">
    <input type="hidden" id="emailID" name="emailID">
    <div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" id="modalEMAIL">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header mh">
                    crear &nbsp; <h4 class="modal-title"> EMAIL</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="emailModulo">Módulo</label>
                        <select name="emailModulo" id="emailModulo" class="form-control" @change="selectModulo($event)">
                            <option value="1" selected>Mensajes</option>
                            <option value="2">Servicios</option>
                            <option value="3">Documentos</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="emailTitulo">Título</label>
                        <input type="text" id="emailTitulo" name="emailTitulo" maxlength="100" placeholder="Título" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="emailCuerpo">Mensaje HTML</label>
                        <div class="my-3" v-if="variables.length > 0">
                            <span class="muted">Variables </span>
                            <span class="badge badge-secondary" style="cursor: pointer;" v-for="row in variables" @click="colocarVariable(row, 2)"> {{ row }} </span>
                        </div>
                        <textarea name="emailCuerpo" id="emailCuerpo" @input="emailDesignHTML($event)" cols="10" rows="5" placeholder="html" class="form-control"></textarea>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class=" alert alert-warning" role="alert" v-for="row in errorForm">
                                {{ row }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="form-group pull-right">
                        <button type="submit" class="btn btn-sm btn-info">Guardar</button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <h6 class="my-3 text-center">Vista de diseño</h6>
                                <div v-html="emailDesign"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>