{# Partial swapped by HTMX after updates. Depends on `user`, `stats`, `roles`. #}
<div class="grid cols-2">
  <div class="card">
    <h2 style="margin-top:0">
      {{ user.email or 'Без email' }}
      {% if user.telegram_id %}<span class="muted" style="font-weight:400">· tg {{ user.telegram_id }}</span>{% endif %}
    </h2>
    <p class="muted" style="margin:0 0 14px">ID: <code>{{ user.id }}</code></p>
    <p class="muted" style="margin:0 0 14px">
      {% if user.telegram_verified %}
        <span class="pill on">TG проверен</span>
      {% else %}
        <span class="pill warn">TG на проверке</span>
      {% endif %}
    </p>

    <div class="grid cols-2" style="margin-bottom:6px">
      <div><div class="stat">{{ user.credits_left }}</div><div class="stat-label">Кредиты</div></div>
      <div><div class="stat">{{ stats.docs_total }}</div><div class="stat-label">Документов</div></div>
      <div><div class="stat" style="color:var(--ok)">{{ stats.docs_done }}</div><div class="stat-label">Успешных</div></div>
      <div><div class="stat" style="color:var(--bad)">{{ stats.docs_failed }}</div><div class="stat-label">Ошибок</div></div>
    </div>
  </div>

  <div class="card">
    <form hx-post="/admin/users/{{ user.id }}" hx-target="#user-card" hx-swap="outerHTML">
      <label for="role">Роль</label>
      <select id="role" name="role">
        {% for r in roles %}
        <option value="{{ r }}" {{ 'selected' if r == user.role else '' }}>{{ r }}</option>
        {% endfor %}
      </select>

      <label for="credits_left">Кредиты</label>
      <div class="row">
        <input id="credits_left" name="credits_left" type="number" min="0" value="{{ user.credits_left }}" style="width:140px">
        <a class="btn ghost sm" hx-get="/admin/users/{{ user.id }}/credits?delta=10" hx-target="#user-card" hx-swap="outerHTML">+10</a>
        <a class="btn ghost sm" hx-get="/admin/users/{{ user.id }}/credits?delta=-1" hx-target="#user-card" hx-swap="outerHTML">−1</a>
        <a class="btn ghost sm" hx-get="/admin/users/{{ user.id }}/credits?delta=100" hx-target="#user-card" hx-swap="outerHTML">+100</a>
      </div>

      <label class="row" style="display:flex;align-items:center;gap:8px;margin-top:16px">
        <input type="checkbox" name="is_active" style="width:auto"
               {{ 'checked' if user.is_active else '' }}>
        <span style="color:var(--ink);font-size:14px">Аккаунт активен</span>
      </label>

      <div class="row" style="margin-top:18px">
        <button class="btn" type="submit">Сохранить</button>
        {% if user.is_active %}
        <button class="btn danger" type="button"
                hx-post="/admin/users/{{ user.id }}/toggle-active" hx-target="#user-card" hx-swap="outerHTML">
          Заблокировать
        </button>
        {% else %}
        <button class="btn" type="button"
                hx-post="/admin/users/{{ user.id }}/toggle-active" hx-target="#user-card" hx-swap="outerHTML">
          Разблокировать
        </button>
        {% endif %}
        {% if not user.telegram_verified %}
        <button class="btn" type="button"
                hx-post="/admin/users/{{ user.id }}/verify-telegram" hx-target="#user-card" hx-swap="outerHTML">
          Подтвердить TG
        </button>
        {% endif %}
      </div>
    </form>
  </div>
</div>