{% extends "base.html" %}
{% block title %}Usuarios del Sistema{% endblock %}
{% block page_title %}🔑 Usuarios del Sistema{% endblock %}

{% block content %}
<div class="flex-between mb-20">
  <p class="text-muted">{{ usuarios|length }} usuarios registrados</p>
  <a href="{{ url_for('nuevo_usuario') }}" class="btn btn-primary">➕ Nuevo Usuario</a>
</div>

<div class="card">
  <table class="table">
    <thead>
      <tr>
        <th>Nombre</th>
        <th>Email</th>
        <th>Rol</th>
        <th>Local</th>
        <th>Último acceso</th>
        <th>Estado</th>
      </tr>
    </thead>
    <tbody>
      {% for u in usuarios %}
      <tr>
        <td>
          <div style="display:flex; align-items:center; gap:10px;">
            <div class="user-avatar" style="width:32px; height:32px; font-size:13px;">{{ u.nombre[0] }}</div>
            <b>{{ u.nombre }}</b>
          </div>
        </td>
        <td>{{ u.email }}</td>
        <td>
          <span class="badge badge-{{ 'danger' if u.rol == 'admin' else 'warning' if u.rol == 'supervisor' else 'info' }}">
            {{ u.rol }}
          </span>
        </td>
        <td>{{ locales[u.local].nombre if u.local and u.local in locales else 'Todos los locales' }}</td>
        <td class="text-muted" style="font-size:12px;">{{ u.ultimo_acceso.strftime('%d/%m/%Y %H:%M') if u.ultimo_acceso else 'Nunca' }}</td>
        <td>
          <span class="badge badge-{{ 'success' if u.activo else 'danger' }}">
            {{ 'Activo' if u.activo else 'Inactivo' }}
          </span>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}