{{/* Admin users — user management table. */}}

{{define "admin-users"}}
<div class="admin-page">
    <h2>Users</h2>
    <p class="section-hint">Manage user accounts, roles, and access.</p>

    <div class="admin-toolbar">
        <input type="text" class="admin-search" id="userSearch" placeholder="Filter users…" oninput="Pages.filterUsers(this.value)">
    </div>

    {{if .Data.Users}}
    <table class="admin-table" id="userTable">
        <thead>
            <tr>
                <th>Username</th>
                <th>Email</th>
                <th>Display Name</th>
                <th>Role</th>
                <th>Status</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            {{range .Data.Users}}
            <tr data-name="{{.Username}} {{.Email}} {{.DisplayName}}">
                <td><strong>{{.Username}}</strong></td>
                <td style="color:var(--text-secondary);">{{.Email}}</td>
                <td>{{.DisplayName}}</td>
                <td><span class="admin-badge admin-badge-{{.Role}}">{{.Role}}</span></td>
                <td><span class="admin-badge admin-badge-{{if .IsActive}}active{{else}}inactive{{end}}">{{if .IsActive}}active{{else}}inactive{{end}}</span></td>
                <td>
                    <button class="btn-small" onclick="sb.call('Pages.editUserRole','{{.ID}}','{{.Username}}','{{.Role}}')">Role</button>
                    {{if .IsActive}}
                    <button class="btn-small" onclick="sb.call('Pages.toggleUser','{{.ID}}',false)">Disable</button>
                    {{else}}
                    <button class="btn-small" onclick="sb.call('Pages.toggleUser','{{.ID}}',true)">Enable</button>
                    {{end}}
                </td>
            </tr>
            {{end}}
        </tbody>
    </table>
    {{else}}
    <div class="empty-hint">No users found.</div>
    {{end}}
</div>
{{end}}