{% extends "base.html" %}
{% block contenido %}

<nav aria-label="breadcrumb">
  <ol class="breadcrumb lh-sm">
    <li class="breadcrumb-item">
      <a href="{{ url_for('cacao_app.pagina_inicio') }}" class="link-dark">
        <i class="bi bi-house"></i> Inicio
      </a>
    </li>
    <li class="breadcrumb-item">
      <a href="{{ url_for('admin.admin_') }}" class="link-dark">Configuración</a>
    </li>
    <li class="breadcrumb-item active" aria-current="page">Administración de Usuarios</li>
  </ol>
</nav>

<div class="ca-page-header">
  <h4><i class="bi bi-people me-2" style="color:#78BF30"></i>Administración de Usuarios</h4>
</div>

<div class="ca-card mb-4">
  <div class="d-flex justify-content-between align-items-center">
    <p class="mb-0" style="color:#64748b;font-size:.875rem;">
      Administra usuarios del sistema, asigna roles y controla su estado de acceso.
    </p>
    <a href="{{ url_for('admin.crear_usuario') }}" class="btn btn-sm btn-primary">Nuevo Usuario</a>
  </div>
</div>

<div class="ca-card p-4">
  {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
      {% for category, message in messages %}
        <div class="alert alert-{{ 'danger' if category == 'danger' else 'success' }} py-2 small">{{ message }}</div>
      {% endfor %}
    {% endif %}
  {% endwith %}

  <div class="table-responsive">
    <table class="table table-sm align-middle">
      <thead>
        <tr>
          <th>Usuario</th>
          <th>Correo</th>
          <th>Roles</th>
          <th>Estado</th>
          <th class="text-end">Acciones</th>
        </tr>
      </thead>
      <tbody>
        {% for usuario in usuarios %}
        <tr>
          <td><strong>{{ usuario.user }}</strong></td>
          <td>{{ usuario.e_mail or "-" }}</td>
          <td>{{ roles_por_usuario[usuario.id] or "Sin roles" }}</td>
          <td>
            <span class="badge bg-{{ 'success' if usuario.active else 'secondary' }}">
              {{ 'Activo' if usuario.active else 'Inactivo' }}
            </span>
          </td>
          <td class="text-end">
            <a href="{{ url_for('admin.editar_usuario', user_id=usuario.id) }}" class="btn btn-sm btn-outline-primary me-1">Editar</a>
            <a href="{{ url_for('admin.usuario_roles', user_id=usuario.id) }}" class="btn btn-sm btn-outline-secondary me-1">Roles</a>
            <a href="{{ url_for('admin.usuario_password', user_id=usuario.id) }}" class="btn btn-sm btn-outline-warning me-1">Contraseña</a>
            <form method="post" class="d-inline">
              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
              <input type="hidden" name="user_id" value="{{ usuario.id }}">
              <button
                type="submit"
                name="action"
                value="toggle"
                class="btn btn-sm btn-{{ 'outline-danger' if usuario.active else 'outline-success' }}"
              >
                {{ 'Deshabilitar' if usuario.active else 'Habilitar' }}
              </button>
            </form>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

{% endblock %}