{% extends "layouts/dashboard.html" %}
{% load i18n %}

{% 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">{% translate "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">{% translate "Administration" %}</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">{% translate "Users" %}</span>
</nav>
{% endblock %}

{% block content %}
{% trans "User management" as users_eyebrow %}
{% trans "Users" as users_title %}
{% trans "Search, review, activate, and bulk-import accounts across the platform." as users_subtitle %}
<header class="mb-8 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
  {% include "components/page_header_text.html" with eyebrow=users_eyebrow title=users_title subtitle=users_subtitle size="lg" with_glyph=False %}
  <div class="flex flex-wrap items-center gap-2 shrink-0">
    <a href="{% url 'accounts:manage_pending_queue' %}" class="btn-secondary">
      <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 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/>
      </svg>
      {% translate "Pending review" %}
      {% if pending_count %}<span class="ml-1 inline-flex items-center justify-center rounded-full bg-amber-100 px-1.5 py-0.5 font-meta text-[10px] font-semibold tabular-nums text-amber-700">{{ pending_count }}</span>{% endif %}
    </a>
    <a href="{% url 'accounts:manage_bulk_import' %}" class="btn-secondary">
      <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="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 7.5L12 3m0 0L7.5 7.5M12 3v13.5"/>
      </svg>
      {% translate "Bulk import" %}
    </a>
    {% include "components/export_button.html" with size="lg" %}
    <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 4.5v15m7.5-7.5h-15"/>
      </svg>
      {% translate "New user" %}
    </a>
  </div>
</header>

{# Filters #}
<form method="get" class="mb-5 grid gap-3 rounded-xl border border-ruforum-border bg-white p-4 sm:grid-cols-4">
  <div class="sm:col-span-2">
    <label for="user-search" class="field-label">{% translate "Search" %}</label>
    <input id="user-search" type="search" name="q" value="{{ filter_q }}" placeholder="{% translate 'Email, name, or institution…' %}">
  </div>
  <div>
    <label for="user-role" class="field-label">{% translate "Role" %}</label>
    <select id="user-role" name="role">
      <option value="">{% translate "All roles" %}</option>
      {% for value, label in roles %}
      <option value="{{ value }}" {% if value == filter_role %}selected{% endif %}>{{ label }}</option>
      {% endfor %}
    </select>
  </div>
  <div>
    <label for="user-status" class="field-label">{% translate "Status" %}</label>
    <select id="user-status" name="status">
      <option value="">{% translate "All" %}</option>
      <option value="active"     {% if filter_status == "active" %}selected{% endif %}>{% translate "Active" %}</option>
      <option value="inactive"   {% if filter_status == "inactive" %}selected{% endif %}>{% translate "Inactive" %}</option>
      <option value="unverified" {% if filter_status == "unverified" %}selected{% endif %}>{% translate "Email unverified" %}</option>
      <option value="pending"    {% if filter_status == "pending" %}selected{% endif %}>{% translate "Pending review" %}</option>
    </select>
  </div>
  <div class="sm:col-span-3">
    <label for="user-institution" class="field-label">{% translate "Institution" %}</label>
    <select id="user-institution" name="institution">
      <option value="">{% translate "Any institution" %}</option>
      {% for inst in institutions %}
      <option value="{{ inst.pk }}" {% if filter_institution == inst.pk|stringformat:"s" %}selected{% endif %}>{{ inst.name }}</option>
      {% endfor %}
    </select>
  </div>
  <div class="flex items-end justify-end gap-2 sm:col-span-1">
    <a href="{% url 'accounts:manage_users' %}" class="btn-secondary btn-sm">{% translate "Reset" %}</a>
    <button type="submit" class="btn-primary btn-sm">{% translate "Filter" %}</button>
  </div>
</form>

{# Results #}
<section>
  <div class="editorial-head">
    <h2 class="editorial-head__title">{{ paginator.count|default:0 }} {% translate "user(s)" %}</h2>
    {% if unverified_count %}
    <span class="editorial-head__aside">
      <a href="?status=unverified" class="text-ruforum-primary hover:text-ruforum-primary-hover">{{ unverified_count }} {% translate "unverified" %} →</a>
    </span>
    {% endif %}
  </div>

  {% if users %}
  <div class="table-frame">
    <table class="data-table">
      <thead>
        <tr>
          <th>{% translate "User" %}</th>
          <th>{% translate "Role" %}</th>
          <th>{% translate "Institution" %}</th>
          <th>{% translate "Joined" %}</th>
          <th>{% translate "Status" %}</th>
          <th class="td-num"></th>
        </tr>
      </thead>
      <tbody>
        {% for u in users %}
        <tr>
          <td>
            <div class="font-medium text-ruforum-text">{{ u.get_full_name|default:u.email }}</div>
            <div class="text-xs text-ruforum-text-muted">{{ u.email }}</div>
          </td>
          <td>
            {% if u.role %}
            <span class="font-meta text-[11px] uppercase tracking-[0.10em] text-ruforum-text-muted">{{ u.get_role_display }}</span>
            {% else %}
            <span class="text-ruforum-text-muted/60">—</span>
            {% endif %}
          </td>
          <td>
            {% if u.institution %}
            <span class="text-ruforum-text">{{ u.institution.name|truncatechars:32 }}</span>
            {% elif u.non_partner_institution_name %}
            <span class="font-meta text-[11px] uppercase tracking-[0.10em] text-amber-700" title="{% translate 'Self-reported, awaiting review' %}">{{ u.non_partner_institution_name|truncatechars:32 }} *</span>
            {% else %}
            <span class="text-ruforum-text-muted/60">—</span>
            {% endif %}
          </td>
          <td class="font-meta text-[11px] uppercase tracking-[0.10em] text-ruforum-text-muted whitespace-nowrap">{{ u.date_joined|date:"j M Y" }}</td>
          <td>
            {% if not u.is_active %}<span class="score-fail">{% translate "Inactive" %}</span>
            {% elif u.pending_admin_review %}<span class="score-warn">{% translate "Pending review" %}</span>
            {% elif not u.email_verified %}<span class="score-warn">{% translate "Unverified" %}</span>
            {% else %}<span class="score-pass">{% translate "Active" %}</span>{% endif %}
          </td>
          <td class="td-num">
            <div class="inline-flex items-center gap-3">
              <a href="{% url 'accounts:manage_edit_user' u.pk %}"
                 class="font-meta text-[11px] uppercase tracking-[0.10em] text-ruforum-primary hover:text-ruforum-primary-hover transition-colors">
                {% translate "Edit" %}
              </a>
              {% if u.is_active and u.pk != request.user.pk and not u.is_superuser %}
              {% url 'accounts:manage_deactivate_user' u.pk as deactivate_url %}
              {% include "components/confirm_button.html" with trigger_label="Deactivate" trigger_class="font-meta text-[11px] uppercase tracking-[0.10em] text-ruforum-text-muted hover:text-rose-600 transition-colors" action_url=deactivate_url danger=True eyebrow=u.email title="Deactivate this account?" lede="The user will be signed out and blocked from signing in until reactivated. Their records are kept." confirm_label="Deactivate user" confirm_class="btn-danger" %}
              {% elif not u.is_active %}
              <form method="post" action="{% url 'accounts:manage_activate_user' u.pk %}" class="inline">
                {% csrf_token %}
                <input type="hidden" name="next" value="{{ request.get_full_path }}">
                <button type="submit" class="font-meta text-[11px] uppercase tracking-[0.10em] text-emerald-700 hover:text-emerald-800 transition-colors">{% translate "Activate" %}</button>
              </form>
              {% endif %}
              {% if u.pk != request.user.pk and not u.is_superuser %}
              {% url 'accounts:manage_delete_user' u.pk as delete_url %}
              {% include "components/confirm_button.html" with trigger_label="Delete" trigger_class="font-meta text-[11px] uppercase tracking-[0.10em] text-rose-600 hover:text-rose-800 transition-colors" action_url=delete_url danger=True eyebrow=u.email title="Permanently delete this user?" lede="This cannot be undone. If the account has linked records it will be deactivated instead of deleted." confirm_label="Delete user" confirm_class="btn-danger" %}
              {% endif %}
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  {% if is_paginated %}
  <div class="mt-4 flex items-center justify-between font-meta text-[11px] uppercase tracking-[0.10em] text-ruforum-text-muted">
    <span>{% blocktranslate with start=page_obj.start_index end=page_obj.end_index total=paginator.count %}Showing {{ start }}–{{ end }} of {{ total }}{% endblocktranslate %}</span>
    <div class="flex items-center gap-1">
      {% if page_obj.has_previous %}
      <a class="btn-secondary btn-sm" href="?{% for k,v in request.GET.items %}{% if k != 'page' %}{{ k }}={{ v }}&{% endif %}{% endfor %}page={{ page_obj.previous_page_number }}">{% translate "Prev" %}</a>
      {% endif %}
      <span>{{ page_obj.number }} / {{ paginator.num_pages }}</span>
      {% if page_obj.has_next %}
      <a class="btn-secondary btn-sm" href="?{% for k,v in request.GET.items %}{% if k != 'page' %}{{ k }}={{ v }}&{% endif %}{% endfor %}page={{ page_obj.next_page_number }}">{% translate "Next" %}</a>
      {% endif %}
    </div>
  </div>
  {% endif %}

  {% else %}
  <div class="plan-card">
    <div class="px-6 py-12 text-center">
      <p class="font-display text-xl font-semibold text-ruforum-text">{% translate "No users match these filters" %}</p>
      <p class="mx-auto mt-2 max-w-[60ch] text-sm leading-relaxed text-ruforum-text-muted">{% translate "Try widening the search, or clear the filters to see everyone." %}</p>
      <a href="{% url 'accounts:manage_users' %}" class="btn-secondary mt-5 inline-flex">{% translate "Reset filters" %}</a>
    </div>
  </div>
  {% endif %}
</section>
{% endblock %}