{% extends "base.html" %}
{% block title %}Foydalanuvchilar — KinoBot Admin{% endblock %}
{% block page_title %}Foydalanuvchilar{% endblock %}

{% block content %}
<div class="card mb-3">
  <div class="card-body py-2">
    <form method="get" class="row g-2 align-items-center">
      <div class="col-md-5">
        <div class="input-group">
          <span class="input-group-text"><i class="bi bi-search"></i></span>
          <input type="text" name="q" class="form-control"
                 placeholder="Telegram ID, ism yoki username..." value="{{ q }}">
        </div>
      </div>
      <div class="col-auto">
        <select name="filter" class="form-select">
          <option value="all" {% if filter == 'all' %}selected{% endif %}>Hammasi</option>
          <option value="active" {% if filter == 'active' %}selected{% endif %}>Faol</option>
          <option value="banned" {% if filter == 'banned' %}selected{% endif %}>Banlangan</option>
        </select>
      </div>
      <div class="col-auto">
        <button type="submit" class="btn btn-primary">Qidirish</button>
        <a href="/users" class="btn btn-outline-secondary ms-1">Tozalash</a>
      </div>
    </form>
  </div>
</div>

<div class="card">
  <div class="card-header bg-white d-flex justify-content-between align-items-center">
    <span class="fw-semibold">Jami: <strong>{{ total }}</strong> ta</span>
    <small class="text-muted">Sahifa {{ page }} / {{ total_pages }}</small>
  </div>
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-hover align-middle mb-0">
        <thead class="table-light">
          <tr>
            <th>Telegram ID</th>
            <th>Ism</th>
            <th>Username</th>
            <th>Til</th>
            <th>Holat</th>
            <th>Ro'yxatdan</th>
            <th>So'nggi faollik</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {% for user in users %}
          <tr>
            <td><code>{{ user.telegram_id }}</code></td>
            <td class="fw-medium">{{ user.full_name }}</td>
            <td>{% if user.username %}<span class="text-primary">@{{ user.username }}</span>{% else %}—{% endif %}</td>
            <td>
              {% if user.language.value == 'uz' %}🇺🇿
              {% elif user.language.value == 'ru' %}🇷🇺
              {% else %}🇬🇧{% endif %}
              {{ user.language.value }}
            </td>
            <td>
              {% if user.is_banned %}
              <span class="badge bg-danger">Ban</span>
              {% elif user.admin_profile %}
              <span class="badge bg-info">Admin</span>
              {% else %}
              <span class="badge bg-success">Faol</span>
              {% endif %}
            </td>
            <td class="text-muted small">{{ user.registered_at.strftime('%d.%m.%Y') }}</td>
            <td class="text-muted small">{{ user.last_active_at.strftime('%d.%m.%Y %H:%M') }}</td>
            <td>
              <a href="/users/{{ user.telegram_id }}" class="btn btn-sm btn-outline-primary">
                <i class="bi bi-eye"></i>
              </a>
            </td>
          </tr>
          {% else %}
          <tr><td colspan="8" class="text-center text-muted py-4">Foydalanuvchilar topilmadi</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  {% if total_pages > 1 %}
  <div class="card-footer bg-white">
    <nav>
      <ul class="pagination pagination-sm mb-0 justify-content-center">
        <li class="page-item {% if page <= 1 %}disabled{% endif %}">
          <a class="page-link" href="?page={{ page-1 }}&q={{ q }}&filter={{ filter }}">‹</a>
        </li>
        {% for p in range([1, page-2]|max, [total_pages+1, page+3]|min) %}
        <li class="page-item {% if p == page %}active{% endif %}">
          <a class="page-link" href="?page={{ p }}&q={{ q }}&filter={{ filter }}">{{ p }}</a>
        </li>
        {% endfor %}
        <li class="page-item {% if page >= total_pages %}disabled{% endif %}">
          <a class="page-link" href="?page={{ page+1 }}&q={{ q }}&filter={{ filter }}">›</a>
        </li>
      </ul>
    </nav>
  </div>
  {% endif %}
</div>
{% endblock %}