{% extends 'panel/base.html' %}

{% block panel_title %}Użytkownicy{% endblock %}
{% block heading %}Użytkownicy{% endblock %}
{% block subheading %}<p class="text-sm text-slate-500 dark:text-slate-400">Konta, uprawnienia i dostęp do panelu.</p>{% endblock %}
{% block actions %}<a class="btn-primary" href="{% url 'panel:users:create' %}">Nowy użytkownik</a>{% endblock %}

{% block content %}
<form method="get" class="flex flex-wrap gap-2">
  <input class="input max-w-xs" type="search" name="q" value="{{ query }}" placeholder="Szukaj: login, imię, e-mail">
  <button class="btn-ghost" type="submit">Szukaj</button>
  {% if query %}<a class="btn-ghost" href="{% url 'panel:users:index' %}">Wyczyść</a>{% endif %}
</form>

<section class="card overflow-hidden">
  <div class="overflow-x-auto">
    <table class="table">
      <thead class="bg-slate-50 dark:bg-slate-900/60">
        <tr>
          <th class="th">Użytkownik</th>
          <th class="th">E-mail</th>
          <th class="th">Uprawnienia</th>
          <th class="th">Ostatnie logowanie</th>
          <th class="th text-right">Akcje</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
        {% for user in page_obj %}
          <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50">
            <td class="td">
              <span class="block font-medium">{{ user.get_full_name|default:user.username }}</span>
              <span class="text-xs text-slate-400">{{ user.username }}</span>
            </td>
            <td class="td">{{ user.email|default:"-" }}</td>
            <td class="td">
              <div class="flex flex-wrap gap-1">
                {% if user.is_superuser %}<span class="badge bg-brand-100 text-brand-800 dark:bg-brand-950 dark:text-brand-200">administrator</span>{% endif %}
                {% for role in user.panel_roles.all %}
                  <span class="badge bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200">{{ role.name }}</span>
                {% empty %}
                  {% if user.is_staff and not user.is_superuser %}<span class="badge bg-amber-100 text-amber-800 dark:bg-amber-950 dark:text-amber-200">bez roli</span>{% endif %}
                {% endfor %}
                {% if not user.is_active %}<span class="badge bg-red-100 text-red-800 dark:bg-red-950 dark:text-red-200">nieaktywne</span>{% endif %}
                {% if user.two_factor.is_confirmed %}<span class="badge bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-200">2FA</span>{% endif %}
              </div>
            </td>
            <td class="td whitespace-nowrap">{{ user.last_login|date:"d.m.Y H:i"|default:"nigdy" }}</td>
            <td class="td">
              <div class="flex justify-end gap-2">
                {% if user.can_manage %}
                  <a class="btn-ghost !px-3 !py-1 text-xs" href="{% url 'panel:users:edit' user.pk %}">Edytuj</a>
                  <form method="post" action="{% url 'panel:users:delete' user.pk %}"
                        data-confirm="Usunąć konto {{ user.username }}?">
                    {% csrf_token %}
                    <button class="btn-danger !px-3 !py-1 text-xs" type="submit">Usuń</button>
                  </form>
                {% else %}
                  <span class="text-xs text-slate-400">tylko administrator</span>
                {% endif %}
              </div>
            </td>
          </tr>
        {% empty %}
          <tr><td class="td py-10 text-center text-slate-500" colspan="5">Brak użytkowników pasujących do zapytania.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  {% if page_obj.paginator.num_pages > 1 %}
    <nav class="flex items-center justify-between gap-4 border-t border-slate-200 px-4 py-3 text-sm dark:border-slate-800">
      <span class="text-slate-500 dark:text-slate-400">Strona {{ page_obj.number }} z {{ page_obj.paginator.num_pages }}</span>
      <div class="flex gap-2">
        {% if page_obj.has_previous %}
          <a class="btn-ghost !px-3 !py-1" href="?page={{ page_obj.previous_page_number }}{% if query %}&amp;q={{ query|urlencode }}{% endif %}">Poprzednia</a>
        {% endif %}
        {% if page_obj.has_next %}
          <a class="btn-ghost !px-3 !py-1" href="?page={{ page_obj.next_page_number }}{% if query %}&amp;q={{ query|urlencode }}{% endif %}">Następna</a>
        {% endif %}
      </div>
    </nav>
  {% endif %}
</section>
{% endblock %}