{% extends "admin/base_admin.html" %}
{% set admin_page = "users" %}

{% block title %}Users - Admin - {{ config.APP_NAME }}{% endblock %}

{% block admin_content %}
  <header class="flex justify-between items-center mb-8">
    <h1 class="text-2xl">Users</h1>
    <a href="{{ url_for('admin.index') }}" class="btn-outline btn-sm">&larr; Dashboard</a>
  </header>

  <div class="card mb-6" style="padding:1rem 1.25rem">
    <form class="flex gap-3 items-center"
          hx-get="{{ url_for('admin.user_results') }}"
          hx-target="#user-results"
          hx-trigger="input delay:300ms"
          hx-indicator="#user-loading">
      <div class="flex-1 max-w-sm">
        <input type="search" name="search" class="form-input w-full"
               placeholder="Search by email…" value="{{ search }}">
      </div>
      <svg id="user-loading" class="htmx-indicator search-spinner" width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <circle cx="12" cy="12" r="10" stroke="#CBD5E1" stroke-width="3"/>
        <path d="M12 2a10 10 0 0 1 10 10" stroke="#0EA5E9" stroke-width="3" stroke-linecap="round"/>
      </svg>
    </form>
  </div>

  <div id="user-results">
    {% include "admin/partials/user_results.html" %}
  </div>
{% endblock %}
