{% extends "base.html" %}

{% block title %}Пользователи{% endblock %}

{% block content %}
<div class="flex flex-wrap items-end justify-between gap-4">
  <div>
    <h1 class="text-2xl font-semibold">Пользователи</h1>
    <p class="mt-1 text-sm text-slate-600">Всего: {{ total }}</p>
  </div>
  <form method="get" action="/users" class="flex items-center gap-2">
    <input
      type="search"
      name="q"
      value="{{ q }}"
      placeholder="Ник, @username, имя или Telegram-ID"
      class="w-80 rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-sky-500 focus:outline-none"
    />
    <button type="submit" class="rounded-lg bg-sky-600 px-4 py-2 text-sm font-medium text-white hover:bg-sky-700">
      Найти
    </button>
    {% if q %}<a href="/users" class="text-sm text-slate-600 hover:underline">Сбросить</a>{% endif %}
  </form>
</div>

{% if saved == 'kick' %}
<div class="mt-4 rounded-lg border border-emerald-200 bg-emerald-50 p-3 text-sm text-emerald-800">
  Пользователь исключён из чата, данные удалены.
</div>
{% endif %}

<div class="mt-6 overflow-x-auto rounded-lg border border-slate-200 bg-white">
  <table class="min-w-full divide-y divide-slate-200 text-sm">
    <thead class="bg-slate-50 text-left text-slate-600">
      <tr>
        <th class="px-4 py-3 font-medium">Ник</th>
        <th class="px-4 py-3 font-medium">Telegram</th>
        <th class="hidden px-4 py-3 font-medium sm:table-cell">Уровень</th>
        <th class="px-4 py-3 font-medium">Баланс</th>
        <th class="hidden px-4 py-3 font-medium md:table-cell">Сообщения</th>
        <th class="px-4 py-3 font-medium">Подписка</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-slate-100">
      {% for user in users %}
      <tr class="hover:bg-slate-50">
        <td class="px-4 py-3">
          <a href="/users/{{ user.id_user }}" class="font-medium text-sky-700 hover:underline">
            {{ user.nick or "—" }}
          </a>
          <div class="text-xs text-slate-500">{{ user.title or "" }}</div>
        </td>
        <td class="px-4 py-3">
          {% if user.username %}<div>@{{ user.username }}</div>{% endif %}
          <div class="font-mono text-xs text-slate-500">{{ user.id_user }}</div>
        </td>
        <td class="hidden px-4 py-3 sm:table-cell">{{ user.lvl }}</td>
        <td class="px-4 py-3">{{ user.balance }}</td>
        <td class="hidden px-4 py-3 md:table-cell">{{ user.msg_count }}</td>
        <td class="px-4 py-3">
          {% if user.subscribed %}
          <span class="rounded bg-emerald-100 px-2 py-0.5 text-xs text-emerald-800">да</span>
          {% else %}
          <span class="rounded bg-slate-100 px-2 py-0.5 text-xs text-slate-500">нет</span>
          {% endif %}
        </td>
      </tr>
      {% else %}
      <tr>
        <td colspan="6" class="px-4 py-6 text-center text-slate-500">
          {% if q %}Никого не нашли по запросу «{{ q }}».{% else %}Пользователей пока нет.{% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

{% if pages > 1 %}
<div class="mt-4 flex items-center justify-between text-sm text-slate-600">
  <div>Страница {{ page }} из {{ pages }}</div>
  <div class="flex gap-3">
    {% if page > 1 %}
    <a href="/users?q={{ q | urlencode }}&page={{ page - 1 }}" class="hover:underline">← Назад</a>
    {% endif %}
    {% if page < pages %}
    <a href="/users?q={{ q | urlencode }}&page={{ page + 1 }}" class="hover:underline">Вперёд →</a>
    {% endif %}
  </div>
</div>
{% endif %}
{% endblock %}