{% extends "cabinet/base_cabinet.html" %}

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

{% block sidebar_nav %}
<li>
  <a href="{% url 'cabinet:dashboard' %}"
     class="cab-nav__item d-flex align-items-center px-3 py-2 rounded mx-2"
     style="color: var(--cab-sidebar-text); transition: background 0.15s;">
    <span class="bi bi-grid fs-5 flex-shrink-0"></span>
    <span class="cab-nav__label ms-3" style="white-space: nowrap;">Дашборд</span>
  </a>
</li>
<li>
  <a href="{% url 'cabinet:users' %}"
     class="cab-nav__item d-flex align-items-center px-3 py-2 rounded mx-2 cab-nav__item--active"
     style="color: var(--cab-sidebar-text); transition: background 0.15s;">
    <span class="bi bi-people fs-5 flex-shrink-0"></span>
    <span class="cab-nav__label ms-3" style="white-space: nowrap;">Пользователи</span>
  </a>
</li>
{% endblock %}

{% block cabinet_content %}

{% include "cabinet/includes/_page_header.html" with title="Пользователи" subtitle="Управление базой пользователей" icon="bi-people" %}

<div class="card border-0 shadow-sm">
  <div class="card-header bg-white border-0 d-flex align-items-center justify-content-between py-3">
    <span class="fw-semibold" style="font-size:.875rem;">Все пользователи
      <span class="badge ms-2" style="background:var(--cab-primary-light,#ede9fe);color:var(--cab-primary);">
        {{ users.count }}
      </span>
    </span>
    <div class="d-flex gap-2">
      <input type="search" class="form-control form-control-sm" placeholder="Поиск…" style="width:200px;">
    </div>
  </div>

  <div class="table-responsive">
    <table class="table table-hover align-middle mb-0" style="font-size:.875rem;">
      <thead class="table-light">
        <tr>
          <th class="ps-4">Пользователь</th>
          <th>Телефон</th>
          <th>Email</th>
          <th>Дата</th>
          <th>Статус</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for user in users %}
        <tr>
          <td class="ps-4">
            <div class="d-flex align-items-center gap-3">
              <span class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white"
                    style="width:36px;height:36px;background:var(--cab-primary);font-size:.8rem;flex-shrink:0;">
                {{ user.full_name|first|upper }}
              </span>
              <div>
                <a href="{{ user.get_absolute_url }}" class="fw-semibold text-decoration-none" style="color:var(--cab-text);">
                  {{ user.full_name }}
                </a>
              </div>
            </div>
          </td>
          <td class="text-muted">{{ user.phone }}</td>
          <td class="text-muted">{{ user.email }}</td>
          <td class="text-muted">{{ user.created_at }}</td>
          <td>
            {% if user.is_active %}
              <span class="badge" style="background:#dcfce7;color:#16a34a;font-weight:500;">Активен</span>
            {% else %}
              <span class="badge" style="background:#f1f5f9;color:#94a3b8;font-weight:500;">Неактивен</span>
            {% endif %}
          </td>
          <td class="text-end pe-3">
            <a href="{{ user.get_absolute_url }}" class="btn btn-sm btn-outline-secondary">
              <span class="bi bi-chevron-right"></span>
            </a>
          </td>
        </tr>
        {% empty %}
        <tr>
          <td colspan="6" class="text-center py-5 text-muted">
            <span class="bi bi-people d-block mb-2" style="font-size:2rem;opacity:.3;"></span>
            Пользователей пока нет
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

{% endblock %}