{% extends "base.html" %}
{% block content %}
<div class="space-y-4">
  <div class="flex items-center justify-between">
    <div>
      <h1 class="text-lg font-semibold tracking-tight">{{ t("users.title") }}</h1>
      <p class="text-xs text-slate-400">
        {{ t("users.subtitle") }}
      </p>
    </div>
  </div>

  <div class="overflow-hidden rounded-xl border border-slate-800 bg-slate-900/60">
    <table class="min-w-full text-sm">
      <thead class="bg-slate-900/80 text-xs uppercase tracking-wide text-slate-400">
        <tr>
          <th class="px-3 py-2 text-left">{{ t("users.username") }}</th>
          <th class="px-3 py-2 text-left">{{ t("users.email") }}</th>
          <th class="px-3 py-2 text-left">{{ t("users.role") }}</th>
          <th class="px-3 py-2 text-left">{{ t("users.status") }}</th>
          <th class="px-3 py-2 text-right">{{ t("users.action") }}</th>
        </tr>
      </thead>
      <tbody>
        {% for u in users %}
        <tr class="border-t border-slate-800/80 hover:bg-slate-800/50">
          <td class="px-3 py-2">
            <span class="font-medium text-slate-100">{{ u.username }}</span>
          </td>
          <td class="px-3 py-2 text-slate-200">
            {% if u.email %}{{ u.email }}{% else %}<span class="text-slate-500">–</span>{% endif %}
          </td>
          <td class="px-3 py-2 text-slate-200">
            {% if u.is_admin %}{{ t("role.admin") }}{% else %}{{ t("role.user") }}{% endif %}
          </td>
          <td class="px-3 py-2 text-slate-200">
            {% if u.is_active %}
              <span class="inline-flex rounded-full bg-emerald-500/10 px-2 py-0.5 text-[11px] text-emerald-200 border border-emerald-500/50">
                {{ t("status.active") }}
              </span>
            {% else %}
              <span class="inline-flex rounded-full bg-slate-800 px-2 py-0.5 text-[11px] text-slate-300 border border-slate-600">
                {{ t("status.inactive") }}
              </span>
            {% endif %}
          </td>
          <td class="px-3 py-2 text-right">
            {% if u.id != current_user.id %}
            <form method="post" action="/users/{{ u.id }}/toggle-active">
              <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
              <button
                type="submit"
                class="rounded-lg border border-slate-700 px-3 py-1 text-xs text-slate-200 hover:border-slate-500 hover:text-white"
              >
                {% if u.is_active %}{{ t("action.deactivate") }}{% else %}{{ t("action.activate") }}{% endif %}
              </button>
            </form>
            {% else %}
            <span class="text-[11px] text-slate-500">{{ t("users.own_account") }}</span>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}