{% extends "layout.html" %}
{% block content %}

<section class="ui-shell">
<div class="space-y-5">

  <div class="flex items-start justify-between gap-4">
    <div>
      <p class="ui-eyebrow">Admin</p>
      <h1 class="ui-page-title mt-0">Users</h1>
      <p class="ui-page-subtitle">Manage who can access Governor.</p>
    </div>
    <a href="/admin/users/new" class="ui-btn-primary shrink-0">
      + New User
    </a>
  </div>

  {% if users and users | length > 0 %}
  <div class="border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 overflow-x-auto">
    <table class="w-full text-sm">
      <thead>
        <tr class="border-b border-slate-200 dark:border-slate-800 text-left text-xs text-slate-500 dark:text-slate-400 uppercase tracking-wider">
          <th class="py-2.5 px-4">Name</th>
          <th class="py-2.5 px-4">Email</th>
          <th class="py-2.5 px-4">Role</th>
          <th class="py-2.5 px-4">Status</th>
          <th class="py-2.5 px-4">Joined</th>
          <th class="py-2.5 px-4"></th>
        </tr>
      </thead>
      <tbody class="text-slate-700 dark:text-slate-300">
        {% for u in users %}
        <tr class="{% if not loop.last %}border-b border-slate-100 dark:border-slate-800/50{% endif %} hover:bg-white dark:hover:bg-slate-950/40 transition-colors">
          <td class="py-3 px-4 font-medium">{{ u.display_name }}</td>
          <td class="py-3 px-4 text-slate-500 dark:text-slate-400">{{ u.email }}</td>
          <td class="py-3 px-4">
            {% if u.roles | selectattr('name', 'equalto', 'admin') | list | length > 0 %}
              <span class="ui-pill ui-pill-blue">Admin</span>
            {% else %}
              <span class="ui-pill ui-pill-neutral">User</span>
            {% endif %}
          </td>
          <td class="py-3 px-4">
            {% if u.status == 'active' %}
              <span class="ui-pill ui-pill-success">Active</span>
            {% else %}
              <span class="ui-pill ui-pill-danger">Inactive</span>
            {% endif %}
          </td>
          <td class="py-3 px-4 text-xs text-slate-500 dark:text-slate-400 whitespace-nowrap">
            {{ u.created_at.strftime('%d %b %Y') if u.created_at else '—' }}
          </td>
          <td class="py-3 px-4 text-right">
            {% if u.id != user.id %}
              {% set is_admin = u.roles | selectattr('name', 'equalto', 'admin') | list | length > 0 %}
              <div class="flex items-center justify-end gap-3">
                <form method="post" action="/admin/users/{{ u.id }}/set-role">
                  {% if is_admin %}
                  <input type="hidden" name="role" value="user">
                  <button type="submit"
                          class="text-xs text-slate-500 dark:text-slate-400 hover:text-amber-600 dark:hover:text-amber-400 transition-colors">
                    Remove Admin
                  </button>
                  {% else %}
                  <input type="hidden" name="role" value="admin">
                  <button type="submit"
                          class="text-xs text-slate-500 dark:text-slate-400 hover:text-brand-600 dark:hover:text-brand-400 transition-colors">
                    Make Admin
                  </button>
                  {% endif %}
                </form>
                {% if u.status == 'active' %}
                <form method="post" action="/admin/users/{{ u.id }}/deactivate"
                      onsubmit="return confirm('Deactivate {{ u.email }}?')">
                  <button type="submit"
                          class="text-xs text-slate-500 dark:text-slate-400 hover:text-rose-600 dark:hover:text-rose-400 transition-colors">
                    Deactivate
                  </button>
                </form>
                {% else %}
                <form method="post" action="/admin/users/{{ u.id }}/reactivate">
                  <button type="submit"
                          class="text-xs text-slate-500 dark:text-slate-400 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors">
                    Reactivate
                  </button>
                </form>
                {% endif %}
              </div>
            {% else %}
              <span class="text-xs text-slate-300 dark:text-slate-600">You</span>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  {% else %}
  <div class="ui-pane p-6 text-center">
    <p class="text-sm text-slate-500 dark:text-slate-400">No users yet.</p>
    <a href="/admin/users/new" class="mt-3 inline-block ui-btn-primary">Create first user</a>
  </div>
  {% endif %}

</div>
</section>
{% endblock %}