<div class="card">
  {% if users %}
  <div class="overflow-x-auto">
    <table class="table">
      <thead>
        <tr>
          <th>ID</th>
          <th>Email</th>
          <th>Name</th>
          <th>Plan</th>
          <th>Joined</th>
          <th>Last Login</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for u in users %}
        <tr data-href="{{ url_for('admin.user_detail', user_id=u.id) }}">
          <td class="mono text-sm">{{ u.id }}</td>
          <td><a href="{{ url_for('admin.user_detail', user_id=u.id) }}">{{ u.email }}</a></td>
          <td>{{ u.name or '-' }}</td>
          <td>
            {% if u.plan %}
            <span class="badge">{{ u.plan }}</span>
            {% else %}
            <span class="text-sm text-slate">free</span>
            {% endif %}
          </td>
          <td class="mono text-sm">{{ u.created_at[:10] }}</td>
          <td class="mono text-sm">{{ u.last_login_at[:10] if u.last_login_at else 'Never' }}</td>
          <td>
            <form method="post" action="{{ url_for('admin.impersonate', user_id=u.id) }}" class="m-0">
              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
              <button type="submit" class="btn-outline btn-sm">Impersonate</button>
            </form>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  <div class="flex gap-4 justify-center mt-4 mb-2 text-sm">
    {% if page > 1 %}
    <button class="btn-outline btn-sm"
            hx-get="{{ url_for('admin.user_results') }}?page={{ page - 1 }}{% if search %}&search={{ search }}{% endif %}"
            hx-target="#user-results"
            hx-swap="innerHTML">&larr; Previous</button>
    {% endif %}
    <span class="text-slate self-center">Page {{ page }}</span>
    {% if users | length == 50 %}
    <button class="btn-outline btn-sm"
            hx-get="{{ url_for('admin.user_results') }}?page={{ page + 1 }}{% if search %}&search={{ search }}{% endif %}"
            hx-target="#user-results"
            hx-swap="innerHTML">Next &rarr;</button>
    {% endif %}
  </div>
  {% else %}
  <p class="text-slate text-sm" style="padding:1.5rem 1rem">No users found.</p>
  {% endif %}
</div>
