{% extends "base.html" %}
{% block title %}Usuarios{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
  <h2 class="fw-bold mb-0"><i class="bi bi-people text-primary"></i> Gestión de Usuarios</h2>
  <a href="{{ url_for('usuarios.nuevo') }}" class="btn btn-primary">
    <i class="bi bi-person-plus"></i> Nuevo Usuario
  </a>
</div>

<div class="card shadow-sm border-0">
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-hover mb-0 align-middle">
        <thead class="table-primary">
          <tr>
            <th>#</th>
            <th>Nombre Completo</th>
            <th>Correo</th>
            <th>Puesto</th>
            <th>Rol</th>
            <th class="text-center">Estado</th>
            <th class="text-center">Acciones</th>
          </tr>
        </thead>
        <tbody>
          {% for u in usuarios.items %}
          <tr class="{{ '' if u.activo else 'table-secondary text-muted' }}">
            <td>{{ u.id }}</td>
            <td class="fw-semibold">{{ u.nombre_completo }}</td>
            <td>{{ u.correo }}</td>
            <td>{{ u.puesto }}</td>
            <td>
              <span class="badge
                {% if u.rol.nombre == 'Administrador' %}bg-danger
                {% elif u.rol.nombre == 'Desarrollador' %}bg-primary
                {% else %}bg-success{% endif %}">
                {{ u.rol.nombre }}
              </span>
            </td>
            <td class="text-center">
              {% if u.activo %}
                <span class="badge bg-success"><i class="bi bi-check-circle"></i> Activo</span>
              {% else %}
                <span class="badge bg-secondary"><i class="bi bi-x-circle"></i> Inactivo</span>
              {% endif %}
            </td>
            <td class="text-center">
              <a href="{{ url_for('usuarios.editar', id=u.id) }}"
                 class="btn btn-sm btn-outline-primary me-1" title="Editar">
                <i class="bi bi-pencil"></i>
              </a>
              <form method="POST"
                    action="{{ url_for('usuarios.toggle_activo', id=u.id) }}"
                    class="d-inline"
                    onsubmit="return confirm('¿Confirmar cambio de estado?')">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <button type="submit"
                        class="btn btn-sm {{ 'btn-outline-warning' if u.activo else 'btn-outline-success' }}"
                        title="{{ 'Desactivar' if u.activo else 'Activar' }}">
                  <i class="bi {{ 'bi-toggle-on' if u.activo else 'bi-toggle-off' }}"></i>
                </button>
              </form>
            </td>
          </tr>
          {% else %}
          <tr>
            <td colspan="7" class="text-center text-muted py-4">
              <i class="bi bi-inbox fs-3 d-block mb-2"></i>No hay usuarios registrados.
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- Paginación -->
{% if usuarios.pages > 1 %}
<nav class="mt-3">
  <ul class="pagination pagination-sm justify-content-center">
    {% for p in usuarios.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
      {% if p %}
        <li class="page-item {{ 'active' if p == usuarios.page else '' }}">
          <a class="page-link" href="{{ url_for('usuarios.lista', page=p) }}">{{ p }}</a>
        </li>
      {% else %}
        <li class="page-item disabled"><span class="page-link">…</span></li>
      {% endif %}
    {% endfor %}
  </ul>
</nav>
{% endif %}
{% endblock %}

{% block scripts %}{% endblock %}