{% extends "base.html" %}
{% block title %}Пользователи — Администрирование — Мои Товары{% endblock %}
{% block page_title %}Пользователи{% endblock %}

{% block content %}
<div class="pg-title">Пользователи</div>
<div class="pg-sub">Управление аккаунтами и подключениями пользователей</div>

<!-- Topbar action -->
<div style="display:flex;justify-content:flex-end;margin-bottom:16px;">
  <button class="btn btn-primary btn-sm" onclick="document.getElementById('create-user-dialog').showModal()">
    <i class="bi bi-person-plus"></i> Создать пользователя
  </button>
</div>

<!-- Create user dialog -->
<dialog id="create-user-dialog">
  <div class="dialog-hd">
    <div class="dialog-title">Создать пользователя</div>
    <button class="dialog-close" onclick="document.getElementById('create-user-dialog').close()">
      <i class="bi bi-x-lg"></i>
    </button>
  </div>
  <div class="dialog-body">
    {% if create_errors %}
    <div class="alert alert-rd" style="margin-bottom:14px;">
      <span><i class="bi bi-x-circle"></i></span>
      <div>{% for e in create_errors %}<div>{{ e }}</div>{% endfor %}</div>
    </div>
    {% endif %}
    <form method="post" action="/admin/users/create" novalidate>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
        <div class="form-row">
          <label class="form-lbl" for="cu_first_name">Имя</label>
          <input class="inp" type="text" id="cu_first_name" name="first_name"
                 value="{{ create_form.first_name if create_form else '' }}" required>
        </div>
        <div class="form-row">
          <label class="form-lbl" for="cu_last_name">Фамилия</label>
          <input class="inp" type="text" id="cu_last_name" name="last_name"
                 value="{{ create_form.last_name if create_form else '' }}">
        </div>
      </div>
      <div class="form-row">
        <label class="form-lbl" for="cu_email">Email</label>
        <input class="inp" type="text" id="cu_email" name="email"
               value="{{ create_form.email if create_form else '' }}" required>
      </div>
      <div class="form-row">
        <label class="form-lbl" for="cu_phone">Телефон</label>
        <input class="inp" type="tel" id="cu_phone" name="phone"
               value="{{ create_form.phone if create_form else '' }}" placeholder="+7 (999) 999-99-99">
      </div>
      <div class="form-row">
        <label class="form-lbl" for="cu_password">Пароль</label>
        <input class="inp" type="password" id="cu_password" name="password" required>
      </div>
      {% if user.role == 'system' %}
      <div class="form-row">
        <label class="form-lbl" for="cu_role">Роль</label>
        <select class="inp" id="cu_role" name="role">
          <option value="user" {% if not create_form or create_form.role == 'user' %}selected{% endif %}>Пользователь</option>
          <option value="admin" {% if create_form and create_form.role == 'admin' %}selected{% endif %}>Администратор</option>
        </select>
      </div>
      {% endif %}
      <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:16px;">
        <button type="button" class="btn btn-outline" onclick="document.getElementById('create-user-dialog').close()">Отмена</button>
        <button type="submit" class="btn btn-primary">Создать</button>
      </div>
    </form>
  </div>
</dialog>

{% if create_errors %}
<script>document.addEventListener('DOMContentLoaded', () => document.getElementById('create-user-dialog').showModal());</script>
{% endif %}

<!-- Search / filter bar -->
<div class="card" style="margin-bottom:14px;padding:14px 20px;">
  <form method="get" action="/admin/users" style="display:flex;gap:8px;flex-wrap:wrap;align-items:center;">
    <input class="inp" type="text" name="search" value="{{ search }}"
           placeholder="Поиск по имени, email, телефону" style="flex:1;min-width:200px;">
    <select class="inp" name="status" style="width:auto;">
      <option value="">Все статусы</option>
      <option value="pending" {% if status_filter == 'pending' %}selected{% endif %}>Ожидает</option>
      <option value="active" {% if status_filter == 'active' %}selected{% endif %}>Активен</option>
      <option value="suspended" {% if status_filter == 'suspended' %}selected{% endif %}>Заблокирован</option>
    </select>
    <select class="inp" name="role" style="width:auto;">
      <option value="">Все роли</option>
      <option value="user" {% if role_filter == 'user' %}selected{% endif %}>Пользователь</option>
      <option value="admin" {% if role_filter == 'admin' %}selected{% endif %}>Администратор</option>
      <option value="system" {% if role_filter == 'system' %}selected{% endif %}>Системный</option>
    </select>
    <button type="submit" class="btn btn-primary btn-sm">Найти</button>
    {% if search or status_filter or role_filter %}
    <a href="/admin/users" class="btn btn-outline btn-sm">Сбросить</a>
    {% endif %}
  </form>
</div>

<!-- Users table -->
<div class="card" style="padding:0;">
  <div class="table-wrap">
    <table class="tbl">
      <thead>
        <tr>
          <th>ID</th>
          <th>Пользователь</th>
          <th>Телефон</th>
          <th>Роль</th>
          <th>Статус</th>
          <th>Эвотор</th>
          <th>Дата</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for u in users %}
        <tr>
          <td><span class="mono" style="font-size:11px;color:#9EA8BE;">{{ u.id }}</span></td>
          <td>
            <div style="display:flex;align-items:center;gap:10px;">
              <div class="avatar" style="width:30px;height:30px;font-size:10px;">
                {{ u.first_name[0] if u.first_name else '?' }}{{ u.last_name[0] if u.last_name else '' }}
              </div>
              <div>
                <div class="tbl-name">{{ u.first_name }} {{ u.last_name }}</div>
                <div class="tbl-sub">
                  {{ u.email }}
                  {% if not u.is_email_confirmed %}
                    <span class="tag tag-yl" style="font-size:9.5px;padding:0 5px;margin-left:4px;"><i class="bi bi-exclamation-circle"></i></span>
                  {% endif %}
                </div>
              </div>
            </div>
          </td>
          <td style="font-size:12px;color:#9EA8BE;">{{ u.phone or '—' }}</td>
          <td>
            {% if u.role == 'system' %}
              <span class="tag tag-rd" style="font-size:10.5px;">Системный</span>
            {% elif u.role == 'admin' %}
              <span class="tag tag-or" style="font-size:10.5px;">Админ</span>
            {% else %}
              <span class="tag tag-dim" style="font-size:10.5px;">Польз.</span>
            {% endif %}
          </td>
          <td>
            {% if u.status == 'active' %}
              <span class="tag tag-gr"><span class="dot g"></span>Активен</span>
            {% elif u.status == 'pending' %}
              <span class="tag tag-yl"><span class="dot y pulse"></span>Ожидает</span>
            {% else %}
              <span class="tag tag-rd"><span class="dot r"></span>Заблок.</span>
            {% endif %}
          </td>
          <td>
            {% if u.evotor_user_id %}
              <span class="tag tag-gr" style="font-size:10.5px;"><i class="bi bi-check-circle"></i></span>
            {% else %}
              <span style="color:#9EA8BE;font-size:12px;">—</span>
            {% endif %}
          </td>
          <td><span class="mono" style="font-size:11px;color:#9EA8BE;">{{ u.created_at | datefmt }}</span></td>
          <td>
            <a href="/admin/users/{{ u.id }}" class="btn btn-outline btn-xs">
              <i class="bi bi-eye"></i>
            </a>
          </td>
        </tr>
        {% else %}
        <tr>
          <td colspan="8" class="text-center" style="padding:32px;color:#9EA8BE;">Пользователи не найдены</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  {% if total_pages > 1 %}
  <div class="pagination">
    {% if page > 1 %}
    <a href="?page={{ page - 1 }}&search={{ search }}&status={{ status_filter }}&role={{ role_filter }}" class="btn btn-outline btn-sm">« Назад</a>
    {% endif %}
    <span style="font-size:12px;color:#9EA8BE;">Стр. {{ page }} из {{ total_pages }}</span>
    {% if page < total_pages %}
    <a href="?page={{ page + 1 }}&search={{ search }}&status={{ status_filter }}&role={{ role_filter }}" class="btn btn-outline btn-sm">Вперёд »</a>
    {% endif %}
  </div>
  {% endif %}
</div>

{% if user.role == 'system' %}
<div style="margin-top:14px;text-align:right;">
  <a href="/admin/roles" class="btn btn-outline btn-sm">
    <i class="bi bi-shield-lock"></i> Управление ролями
  </a>
</div>
{% endif %}
{% endblock %}