{% extends 'base.html' %}

{% block titulo %} Usuarios y Permisos {% endblock %}

{% block seccion %}
<div class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h5 class="m-0">Panel de Control de Usuarios</h5>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="#">Usuarios</a></li>
          <li class="breadcrumb-item active">Permisos</li>
          <li class="breadcrumb-item active">Grupos</li>
        </ol>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block contenido %}
<div class="row justify-content-center">
<div class="card card-default w-80">
  <div class="card-header">
    <div class="d-flex justify-content-between">
   
      <h3 class="card-title m-0"> Usuarios {{info_user.username}} </h3>
  
    
      <a  href="{%url 'cambio_password' info_user.id %}" class="btn btn-success float-left"><i
          class="fas fa-plus-square"></i> Nueva Contraseña</a>
    </div>
  <div class="card-body">
  {% include 'usuarios/formulario_user.html' %}
  </div>
</div>
</div>

{% endblock %}


{% block js %}
<script>
  $(document).ready(function () {
    $('.duallistbox').bootstrapDualListbox({
      filterTextClear: 'Todos',
      moveAll: false,
      nonSelectedListLabel: 'Permisos sin asignar',
      selectedListLabel: 'Permisos asignados',
    });

    // Reinicializar el DualListBox después de cargar la página
    $('.duallistbox').bootstrapDualListbox('refresh');
  });
</script>

  <script>
    document.getElementById('togglePassword').addEventListener('click', function (e) {
      var passwordInput = document.getElementById('password');
      if (passwordInput.type === "password") {
        passwordInput.type = "text";
        e.target.innerHTML = '<i class="fa fa-eye-slash"></i>';
      } else {
        passwordInput.type = "password";
        e.target.innerHTML = '<i class="fa fa-eye"></i>';
      }
    });
  </script>
{% endblock %}