{% extends "layouts/dashboard.html" %}
{% block title %}User management — IILMP{% endblock %}
{% block breadcrumbs %}
<nav class="flex items-center gap-1.5 font-meta text-xs text-ruforum-text-muted" aria-label="Breadcrumb">
  <a href="{% url 'core:dashboard' %}" class="hover:text-ruforum-primary transition-colors">Dashboard</a>
  <svg class="crumb-sep" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 18l6-6-6-6"/></svg>
  <span class="opacity-60">Access control</span>
  <svg class="crumb-sep" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 18l6-6-6-6"/></svg>
  <span class="text-ruforum-text">User management</span>
</nav>
{% endblock %}
{% block content %}

<div class="mb-6 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
  <div>
    <h1 class="font-display text-2xl font-bold text-ruforum-text">User management</h1>
    <p class="mt-1 text-sm text-ruforum-text-muted">Search accounts and manage roles, staff flags, and direct permissions.</p>
  </div>
  <div class="flex flex-wrap gap-2 shrink-0">
    <a href="{% url 'core:role_permissions_list' %}" class="btn-secondary">
      Role permissions
    </a>
    <a href="{% url 'core:user_manage_create' %}" class="btn-primary">
      <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
      New user
    </a>
  </div>
</div>

{% include "components/rims_page_intro.html" with eyebrow="Access control" heading="One directory for every IILMP account." description="Each user has an IILMP role that maps to a Django auth group of the same name. Edit a user to change their role, toggle active or staff status, or grant extra direct permissions on top of the role." %}

<div class="card overflow-hidden">
  <form method="get" class="card-toolbar flex flex-wrap items-center gap-3">
    <label class="search-field search-field--sm">
      <svg class="search-field__icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/>
      </svg>
      <input type="search" name="q" value="{{ request.GET.q }}" placeholder="Email or name" class="w-64">
    </label>
    <div class="flex items-center gap-2">
      <span class="font-meta text-[10px] font-semibold uppercase tracking-[0.12em] text-ruforum-text-muted shrink-0">Role</span>
      <select name="role" class="h-9 rounded-lg border border-ruforum-border bg-white px-3 text-sm text-ruforum-text">
        <option value="">All roles</option>
        {% for val, label in role_choices %}
        <option value="{{ val }}" {% if request.GET.role == val %}selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="flex items-center gap-1.5">
      <span class="font-meta text-[10px] font-semibold uppercase tracking-[0.12em] text-ruforum-text-muted shrink-0">Status</span>
      <a href="?{% if request.GET.q %}q={{ request.GET.q }}&{% endif %}{% if request.GET.role %}role={{ request.GET.role }}{% endif %}"
         class="facet-chip {% if not request.GET.active %}facet-chip--active{% endif %}">Any</a>
      <a href="?active=1{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}{% if request.GET.role %}&role={{ request.GET.role }}{% endif %}"
         class="facet-chip {% if request.GET.active == '1' %}facet-chip--active{% endif %}">Active</a>
      <a href="?active=0{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}{% if request.GET.role %}&role={{ request.GET.role }}{% endif %}"
         class="facet-chip {% if request.GET.active == '0' %}facet-chip--active{% endif %}">Inactive</a>
    </div>
    <div class="flex items-center gap-2 ml-auto">
      <button type="submit" class="btn-primary btn-sm">Apply</button>
      {% if request.GET.q or request.GET.role or request.GET.active %}
      <a href="{% url 'core:user_manage_list' %}" class="font-meta text-xs font-semibold text-ruforum-primary hover:text-ruforum-primary-hover transition-colors">Clear</a>
      {% endif %}
    </div>
  </form>

  {% if page_obj.paginator.count %}
  <div class="border-t border-ruforum-border px-5 py-2.5">
    <p class="font-meta text-xs text-ruforum-text-muted">
      {{ page_obj.paginator.count }} account{{ page_obj.paginator.count|pluralize }}
      {% if request.GET.q or request.GET.role or request.GET.active %} matching filters{% endif %}
    </p>
  </div>
  {% endif %}

  <div class="overflow-x-auto">
    <table class="data-table">
      <thead>
        <tr>
          <th class="w-10"></th>
          <th>Email</th>
          <th>Name</th>
          <th>Role</th>
          <th class="text-center">Status</th>
          <th class="text-center">Staff</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for u in page_obj %}
        <tr>
          <td class="pl-4 pr-2">
            {% include "components/user_avatar.html" with user=u size="sm" variant="on_light" only %}
          </td>
          <td class="font-medium text-ruforum-text">
            <a href="{% url 'core:user_manage_edit' u.pk %}" class="hover:text-ruforum-primary">{{ u.email }}</a>
          </td>
          <td class="text-ruforum-text-muted">{{ u.get_full_name|default:"—" }}</td>
          <td>
            {% if u.get_role_display %}
            <span class="badge-neutral">{{ u.get_role_display }}</span>
            {% else %}
            <span class="text-ruforum-text-muted">—</span>
            {% endif %}
          </td>
          <td class="text-center">
            {% if u.is_active %}
            <span class="badge-green">Active</span>
            {% else %}
            <span class="badge-neutral">Inactive</span>
            {% endif %}
          </td>
          <td class="text-center">
            {% if u.is_staff %}
            <span class="badge-primary">Staff</span>
            {% else %}
            <span class="text-ruforum-text-muted">—</span>
            {% endif %}
          </td>
          <td class="text-right">
            <a href="{% url 'core:user_manage_edit' u.pk %}" class="table-link">Edit</a>
          </td>
        </tr>
        {% empty %}
        <tr>
          <td colspan="7">
            <div class="empty-panel my-0 border-0">
              <p class="empty-panel__title">
                {% if request.GET.q or request.GET.role or request.GET.active %}No accounts match these filters.{% else %}No user accounts yet.{% endif %}
              </p>
              <p class="empty-panel__lede">
                {% if request.GET.q or request.GET.role or request.GET.active %}
                  Broaden your search, change the role, or clear filters to return to the full list.
                {% else %}
                  Create the first account to begin issuing IILMP roles.
                {% endif %}
              </p>
              <div class="empty-panel__action">
                {% if request.GET.q or request.GET.role or request.GET.active %}
                <a href="{% url 'core:user_manage_list' %}" class="btn-secondary">Clear filters</a>
                {% else %}
                <a href="{% url 'core:user_manage_create' %}" class="btn-primary">Create first user</a>
                {% endif %}
              </div>
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  {% if page_obj.has_other_pages %}
  <div class="flex items-center justify-between border-t border-ruforum-border px-5 py-3.5">
    <span class="font-meta text-xs text-ruforum-text-muted">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
    <div class="flex gap-3">
      {% if page_obj.has_previous %}
      <a class="font-meta text-xs font-semibold text-ruforum-primary hover:text-ruforum-primary-hover transition-colors" href="?page={{ page_obj.previous_page_number }}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}{% if request.GET.role %}&role={{ request.GET.role }}{% endif %}{% if request.GET.active %}&active={{ request.GET.active }}{% endif %}">← Previous</a>
      {% endif %}
      {% if page_obj.has_next %}
      <a class="font-meta text-xs font-semibold text-ruforum-primary hover:text-ruforum-primary-hover transition-colors" href="?page={{ page_obj.next_page_number }}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}{% if request.GET.role %}&role={{ request.GET.role }}{% endif %}{% if request.GET.active %}&active={{ request.GET.active }}{% endif %}">Next →</a>
      {% endif %}
    </div>
  </div>
  {% endif %}
</div>

{% endblock %}