{% extends "admin/base.html" %}

{% block title %}Users — Admin — Porchlight{% endblock %}

{% block admin_content %}
<h1>Users</h1>

<section>
    <h2>Create invite</h2>
    <form hx-post="/admin/invite" hx-target="#invite-status" hx-swap="innerHTML">
        <div class="admin-search">
            <input type="text" name="username" placeholder="Username for new invite" required>
            <button type="submit">Create invite</button>
        </div>
    </form>
    <div id="invite-status"></div>
</section>

<section>
    <div class="admin-search">
        <input type="search" name="q" placeholder="Search by username or email..."
               hx-get="/admin/users" hx-target="#user-table-body" hx-swap="innerHTML"
               hx-trigger="input changed delay:300ms, search"
               hx-include="this" hx-push-url="false"
               value="{{ query or '' }}">
    </div>

    <div id="user-table-container">
        <table class="admin-table">
            <thead>
                <tr>
                    <th>Username</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Groups</th>
                    <th>Status</th>
                    <th>Created</th>
                </tr>
            </thead>
            <tbody id="user-table-body">
                {% include "admin/_user_rows.html" %}
            </tbody>
        </table>
        <div class="pagination" id="pagination">
            {% include "admin/_pagination.html" %}
        </div>
    </div>
</section>
{% endblock %}