{% extends "backoffice/base.html" %}
{% block page_title %}Utilisateurs{% endblock %}
{% block breadcrumb %}Site <span class="mx-1 text-slate-300">/</span> <span class="font-semibold text-brand-900">Utilisateurs</span>{% endblock %}
{% block content %}
<c-page-header title="Utilisateurs" subtitle="Comptes de la rédaction et rôles associés.">
  <c-slot name="toolbar"><c-button href="{% url 'users:create' %}" icon="plus">Nouvel utilisateur</c-button></c-slot>
</c-page-header>
<form method="get" class="card mb-4 flex flex-col gap-3 p-4 sm:flex-row">
  <input type="search" name="q" value="{{ request.GET.q }}" placeholder="Nom ou email…" class="form-input flex-1" aria-label="Rechercher">
  <select name="role" class="form-select sm:w-52" onchange="this.form.submit()" aria-label="Rôle">
    <option value="">Tous les rôles</option>
    {% for k, l in roles %}<option value="{{ k }}" {% if request.GET.role == k %}selected{% endif %}>{{ l }}</option>{% endfor %}
  </select>
</form>
<div class="card overflow-hidden">
  <div class="table-wrap"><table class="table">
    <thead><tr><th>Utilisateur</th><th>Rôle</th><th class="text-right">Articles</th><th class="hidden md:table-cell">Dernière connexion</th><th class="text-right">Actions</th></tr></thead>
    <tbody>
    {% for u in page_obj %}
      <tr class="{% if not u.is_active %}opacity-60{% endif %}">
        <td>
          <div class="flex items-center gap-3">
            <span class="flex size-9 items-center justify-center rounded-full {% if u.role == 'admin' %}bg-brand-800 text-white{% else %}bg-brand-100 text-brand-800{% endif %} text-xs font-bold">{{ u.initials }}</span>
            <div><a href="{% url 'users:edit' u.pk %}" class="font-semibold text-brand-900 hover:text-brand-600">{{ u.name }}</a>{% if u.pk == user.pk %} <span class="text-xs text-slate-400">(vous)</span>{% endif %}<p class="text-xs text-slate-500">{{ u.email }}{% if u.fonction %} · {{ u.fonction }}{% endif %}</p></div>
          </div>
        </td>
        <td>
          <span class="badge {% if u.role == 'admin' %}badge-red{% elif u.role == 'editeur' %}badge-blue{% elif u.role == 'redacteur' %}badge-yellow{% else %}badge-neutral{% endif %}">{{ u.get_role_display }}</span>
          {% if not u.is_active %}<span class="badge badge-slate">Désactivé</span>{% endif %}
        </td>
        <td class="text-right tabular-nums">{{ u.nb_articles }}</td>
        <td class="hidden text-sm text-slate-500 md:table-cell">{{ u.last_login|date:"d/m/Y H:i"|default:"Jamais" }}</td>
        <td><div class="flex justify-end gap-1">
          <a href="{% url 'users:edit' u.pk %}" class="btn btn-ghost btn-icon" title="Modifier">{% icon "pencil" "size-4" %}</a>
          {% if u.pk != user.pk %}
          <c-post-button action="{% url 'users:delete' u.pk %}" variant="ghost" size="" class="btn-icon text-signal-600 hover:bg-signal-50" icon="trash" title="Supprimer"
            confirm="Supprimer le compte de {{ u.name }} ? Si cette personne a publié des contenus, désactivez plutôt son compte." confirm_label="Supprimer" />
          {% endif %}
        </div></td>
      </tr>
    {% endfor %}
    </tbody>
  </table></div>
</div>
<div class="mt-5"><c-pagination :page="page_obj" label="utilisateurs" /></div>
{% endblock %}