<form id="frm-Usuarios-Notificacion-{{hash_vista}}" >
    <div class="box">
        <div class="box-header with-border">
            <h3 class="box-title">Formulario para Notificar a un Colaborador</h3>
            <div class="box-tools pull-right">
                {% if Notificacion %}
                {{ boton("guardar","guardarCambiosUsuariosNotificaciones")}}
                {% else %}
                {{ boton("guardar","guardarNuevoUsuariosNotificaciones")}}
                {% endif %}
                {{ boton("cerrar", null, "cerrarFormularioUsuariosNotificaciones()")}}
                {{ boton("resetear", null, "notificacionTITULO.focus();")}}  
            </div>            
        </div>        
        <div class="box-body">
            <div class="row">
                <div class="col-md-7" id="">
                    <div class="form-group">
                        <div class="form-group">
                            <label for="notificacionCOLABORADOR">Colaborador:</label>
                            <select class="form-control select2" id="notificacionCOLABORADOR" name="notificacionCOLABORADOR" style="width: 100%;">
                                <option value="" >SELECCION UNO</option>
                                {% if Colaboradores %}
                                {% for colaborador in Colaboradores %}
                                <option value="{{colaborador.colaboradorID}}" >{{colaborador.cargoTITULO}} - {{colaborador.personaNOMBRES}} {{colaborador.personaAPELLIDOS}}</option>
                                {% endfor %}
                                {% endif %}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-md-5" >
                    <div class="form-group">
                        <div class="form-group">
                            <label for="notificacionOPERACION">Operación:</label>
                            <select class="form-control select2" 
                                id="notificacionOPERACION" name="notificacionOPERACION" style="width: 100%;">
                                <option>NINGUNA</option>
                                {% if Operaciones %}
                                {% for Operacion in Operaciones %}
                                <option value="{{Operacion.operacionCODIGO}}" >{{Operacion.componenteTITULO}}/{{Operacion.controladorTITULO}}/{{Operacion.operacionTITULO}}</option>
                                {% endfor %}
                                {% endif %}
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4" id="">
                    <div class="form-group">
                        <label for="notificacionTIPO">Tipo:</label>
                        <select class="form-control select2" id="notificacionTIPO" name="notificacionTIPO" style="width: 100%;">
                            <option value="INFORMACION" >INFORMACION</option>
                            <option value="ALERTA" >ALERTA</option>
                            <option value="AVISO" >AVISO</option>
                            <option value="ERROR" >ERROR</option>
                            <option value="OPERACION" >OPERACION</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-8" id="">
                    <div class="form-group">
                        <label for="notificacionTITULO">Título de Notificacion</label>
                        <input type="text" class="form-control uppercase" name="notificacionTITULO" id="notificacionTITULO"  required
                               value="{{ Notificacion.notificacionTITULO }}" placeholder="Título de Notificaciones"  />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" >
                    <div class="form-group">
                        <label for="notificacionDESCRIPCION">Descripción del Notificacion (max 140 caracteres)</label>
                        <textarea rows="5" cols="80" maxlength="140" class="wysiwyg form-control " placeholder="Descripción del notificacion" 
                                  name="notificacionDESCRIPCION" id="notificacionDESCRIPCION-{{ hash_vista }}" 
                                  >{{ Notificacion.notificacionDESCRIPCION }}</textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" name="notificacionID" value="{{Notificacion.notificacionID}}" />
</form>
<script>
    $(document).ready(function () {
        $("#frm-Usuarios-Notificacion-{{hash_vista}}").submit(function () {
            ejecutarOperacionArchivo(
                    "Usuarios", "Notificaciones", "guardarDatos",
                    crearFormData("frm-Usuarios-Notificacion-{{hash_vista}}"),
                    function (notificacion) {
                        cerrarTabContenedor("frm-Usuarios-Notificacion-{{hash_vista}}");
                        cargarVista('Usuarios', 'Notificaciones', 'mostrarEnviadasPorColaborador', '');
                        if (typeof cargarTablaEnviadasUsuariosNotificaciones === "function") {
                            cargarTablaEnviadasUsuariosNotificaciones();
                        }
                    }
            );
        });
        $("#notificacionDESCRIPCION-{{hash_vista}}").wysihtml5();
        $('#notificacionCOLABORADOR').select2();
        $('#notificacionOPERACION').select2();
    });
    function cerrarFormularioUsuariosNotificaciones() {
        cerrarTabContenedor("frm-Usuarios-Notificacion-{{hash_vista}}");
    }
</script>