<div class="box">
    <div class="box-header with-border">
        <h3 class="box-title">Formulario de UsuariosColaborador</h3>
    </div>   
    <div class="box-body">
        <div class="row">
            <div class="col-md-12" align="center" style="margin-bottom: 20px">
                <img src="{% if Usuario.colaborador.colaboradorFOTO %}{{ Usuario.colaborador.colaboradorFOTO }}{% else %} archivo/colaboradores/fotos/sin-foto.png{% endif %}" alt="Foto de Perfil"  class="img-thumbnail" style="width:10%" />
                <div class="caption">
                    <label for="beneficioMin">Foto Colaborador</label>
                    <input accept="image/*" class="file beneficioFile" data-show-upload="false" data-show-caption="true" 
                        type="file" id="colaboradorFOTO-{{hash_vista}}"  name='colaboradorFOTO'/>           
                </div>
            </div>
            <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="{{ Usuario.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="{{ Usuario.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 Usuario.usuarioID %}
                        Cambiar Clave
                    {% else %}
                        Generar Clave
                    {% endif %}
                </button>
            </div>
        </div>
        <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 Usuario.usuarioESTADO ==  'ACTIVO'  %} checked {% endif %} >
                      ACTIVADO
                </label>
                <label  class="col-md-4">
                      <input type="radio" name="usuariosESTADO" class="flat-blue planes" value="DESACTIVO" required {% if Usuario.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 Usuario.usuarioADMINISTRADOR ==  'SI'  %} checked {% endif %}>
                      SI
                </label>
                <label  class="col-md-4">
                      <input type="radio" name="usuarioADMINISTRADOR" class="flat-blue planes" value="NO" required {% if Usuario.usuarioADMINISTRADOR ==  'NO'  %} checked {% endif %}  >
                      NO
                </label>
            </div>
        </div>
    </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":Usuario } ) }}
          </div>
          <div class="tab-pane" id="tab-permisos-{{ hash_vista }}">
                {{ mostrarVista( 'usuarios', 'usuarios/form-control-operaciones', {"Usuario":Usuario, "operaciones":Operaciones } ) }}
          </div>
        </div>
    </div>
</div>

<script type="text/javascript">

    $(document).ready(function () {
        $('input[type="radio"].flat-blue').iCheck({
          radioClass   : 'iradio_flat-blue'
        });
        
        $("#colaboradorFOTO-{{hash_vista}}").fileinput({
            previewFileType: "image",
            maxFileSize: 512,
        });
    });
    
    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>