<form id="frm-Usuarios-UsuariosApi-{{hash_vista}}" >
    <div class="box">
        <div class="box-header with-border">
            <h3 class="box-title">Formulario de UsuariosApi</h3>
            <div class="box-tools pull-right">
                {% if UsuariosApi %}
                {{ boton("guardar","mostrarFormularioEditarUsuariosApiUsuarios")}}
                {% else %}
                {{ boton("guardar","mostrarFormularioNuevoUsuariosApiUsuarios")}}
                {% endif %}
                {{ boton("cerrar", null, "cerrarFormularioUsuariosApiUsuarios" ~ hash_vista ~ "()")}}
            </div>            
        </div>        
        <div class="box-body">
            <div class="row">
                <div class="col-md-12" id="">
                    <div class="form-group">
                        <div class="form-group">
                            <label for="aplicaconID">APLICACION:</label>
                            <select class="form-control select2" id="aplicaconID-{{hash_vista}}" name="aplicaconID" style="width: 100%;">
                                {% if Aplicaciones %}
                                    {% for aplicacion in Aplicaciones %}
                                    <option value="{{aplicacion.aplicacionID}}" {% if aplicacion.aplicacionID ==  UsuariosApi.aplicacionID  %} selected {% endif %}>{{aplicacion.aplicacionTITULO|upper}}</option>
                                    {% endfor %}
                                {% endif %}
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6" id="">
                    <div class="form-group">
                        <label for="usuarioNOMBRE">Nombre de Usuario</label>
                        <input type="text" class="form-control uppercase" name="usuarioNOMBRE" id="usuarioNOMBRE-{{hash_vista}}"  
                               value="{{ UsuariosApi.usuarioNOMBRE }}"  autocomplete="off" placeholder="Nombre de Usuario"  required/>
                    </div>
                </div>
                <div class="col-md-5" id="">
                    <div class="form-group">
                        <label for="usuarioCLAVE">Contraseña</label>
                        <input type="text" class="form-control uppercase" name="usuarioCLAVE" id="usuarioCLAVE-{{hash_vista}}"  required
                               value="{{ UsuariosApi.usuarioCLAVE }}"  autocomplete="off" placeholder="Clave de usuario"  />
                        <p class="help-block">Contraseña Generada: <span id="usuarioTXTCLAVE-{{hash_vista}}"></span></p>
                    </div>
                </div>
                <div class="col-md-1" id="">
                    <button type="button" class="btn btn-app" onclick="generar{{hash_vista}}('usuarioCLAVE-{{hash_vista}}', 'usuarioTXTCLAVE-{{hash_vista}}')">
                        <i class="fa fa-repeat"></i>
                        {% if UsuariosApi.usuarioID %}
                            Cambiar Clave
                        {% else %}
                            Generar Clave
                        {% endif %}
                    </button>
                </div>
            </div>
            <div class="row">
                <div class="col-md-5" id="">
                    <div class="form-group">
                        <label for="apiCLAVESECRETA">Clave Secreta</label>
                        <input type="text" class="form-control uppercase" name="apiCLAVESECRETA" id="apiCLAVESECRETA-{{hash_vista}}"  required
                            value="{{ UsuariosApi.apiCLAVESECRETA }}"  autocomplete="off" placeholder="Clave Secreta"  />
                            <p class="help-block">Contraseña Generada: <span id="apiTEXTCLAVESECRETA-{{hash_vista}}"></span></p>
                    </div>
                </div>
                <div class="col-md-1" id="">
                    <button type="button" class="btn btn-app" onclick="generar{{hash_vista}}('apiCLAVESECRETA-{{hash_vista}}', 'apiTEXTCLAVESECRETA-{{hash_vista}}')">
                        <i class="fa fa-repeat"></i>
                        {% if UsuariosApi.usuarioID %}
                            Cambiar Clave
                        {% else %}
                            Generar Clave
                        {% endif %}
                    </button>
                </div>
                <div class="col-md-6" id="">
                    <div class="form-group">
                        <label for="apiIP">IP</label>
                        <input type="number" class="form-control uppercase" name="apiIP" id="apiIP-{{hash_vista}}"  required
                               value="{{ UsuariosApi.apiIP }}"  autocomplete="off" placeholder="IP"  />
                    </div>
                </div>
            </div>
            <hr/>
            <div class="row">
                <div class="form-group col-md-6">
                    <label class="col-md-4">
                          ESTADO DEL USUARIO: 
                    </label>
                    <label class="col-md-4">
                          <input type="radio" name="usuariosESTADO" class="flat-blue planes" value="ACTIVO"  required {% if UsuariosApi.usuarioESTADO ==  'ACTIVO'  %} checked {% endif %} >
                          ACTIVADO
                    </label>
                    <label  class="col-md-4">
                          <input type="radio" name="usuariosESTADO" class="flat-blue planes" value="DESACTIVO" required {% if UsuariosApi.usuarioESTADO ==  'DESACTIVO'  %} checked {% endif %}>
                          DESACTIVADO
                    </label>
                </div>
                <div class="form-group col-md-6">
                    <label class="col-md-4">
                          ADMINISTRADOR: 
                    </label>
                    <label class="col-md-4">
                          <input type="radio" name="usuarioADMINISTRADOR" class="flat-blue planes" value="SI" required {% if UsuariosApi.usuarioADMINISTRADOR ==  'SI'  %} checked {% endif %}>
                          SI
                    </label>
                    <label  class="col-md-4">
                          <input type="radio" name="usuarioADMINISTRADOR" class="flat-blue planes" value="NO" required {% if UsuariosApi.usuarioADMINISTRADOR ==  'NO'  %} checked {% endif %}  >
                          NO
                    </label>
                </div>
            </div>
            <div class="row">
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                      <li class="active"><a href="#tab-roles-{{ hash_vista }}" data-toggle="tab">Asiganar Roles</a></li>
                      <li><a href="#tab-permisos-{{ hash_vista }}" data-toggle="tab">Asignar Permiso Personalizados</a></li>
                    </ul>
                    <div class="tab-content" id="div-tblOperacionActividades-{{ hash_vista }}">
                      <div class="tab-pane active" id="tab-roles-{{ hash_vista }}">
                            {{ mostrarVista( 'usuarios', 'usuarios/form-control-rol', {"roles":Roles , "Usuario":UsuariosApi } ) }}
                      </div>
                      <div class="tab-pane" id="tab-permisos-{{ hash_vista }}">
                            {{ mostrarVista( 'usuarios', 'usuarios/form-control-operaciones', {"Usuario":UsuariosApi, "operaciones":Operaciones } ) }}
                      </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" name="usuarioID" value="{{UsuariosApi.usuarioID}}" />
</form>
{% block javascript %}
<script>
    $(document).ready(function () {
        $('input[type="radio"].flat-blue').iCheck({
          radioClass   : 'iradio_flat-blue'
        });
        $("#frm-Usuarios-UsuariosApi-{{hash_vista}}").submit(function () {
            ejecutarOperacion(
                    "Usuarios", "UsuariosApi", "guardarDatos",
                    $("#frm-Usuarios-UsuariosApi-{{hash_vista}}").serialize(),
                    function (usuario) {
                        cerrarFormularioUsuariosApiUsuarios{{hash_vista}}();
                        cargarVista('Usuarios', 'UsuariosApi', 'mostrarFormularioEditar', 'usuarioID=' + usuario.usuarioID);
                        if (typeof cargarTablaUsuariosApiUsuarios === "function") {
                            cargarTablaUsuariosApiUsuarios();
                        }
                    }
            );
        });
        $('#aplicaconID-{{hash_vista}}').select2();
    });
    function cerrarFormularioUsuariosApiUsuarios{{hash_vista}}() {
        cerrarTabContenedor("frm-Usuarios-UsuariosApi-{{hash_vista}}");
    }
    
    function generar{{hash_vista}}(idInput, idText = null){
      long=15;
      var caracteres = "abcdefghijkmnpqrtuvwxyzABCDEFGHIJKLMNPQRTUVWXYZ2346789";
      var contrasena = "";
      for (i=0; i<long; i++) contrasena += caracteres.charAt(Math.floor(Math.random()*caracteres.length));
      $("#"+idInput).val(contrasena);
      $("#"+idText).html(contrasena);
      
    }
</script>
</script>   
{% endblock %}