{{ define "admin/users.html" }}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>WarpBox Admin Users</title>
    <link rel="icon" type="image/png" href="/static/WarpBoxLogo.png">
    <link rel="stylesheet" href="/static/css/app.css">
    <link rel="stylesheet" href="/static/css/window.css">
    <link rel="stylesheet" href="/static/css/components/buttons.css">
    <link rel="stylesheet" href="/static/css/components/toast.css">
    <link rel="stylesheet" href="/static/css/admin.css">
    <link rel="stylesheet" href="/static/css/users.css">
</head>
<body>
    <div class="admin-shell">
        <div class="admin-frame">
            {{ template "admin/header.html" . }}

            <div class="win98-window admin-workspace-window" role="main">
                <div class="win98-titlebar">
                    <div class="win98-titlebar-label">
                        <img class="win98-titlebar-icon" src="/static/WarpBoxLogo.png" alt="" aria-hidden="true">
                        <h1>WarpBox Users</h1>
                    </div>
                    <div class="win98-window-controls" aria-hidden="true">
                        <button class="win98-control" type="button">_</button>
                        <button class="win98-control" type="button">□</button>
                        <button class="win98-control" type="button">x</button>
                    </div>
                </div>

                <nav class="menu-bar" aria-label="Users toolbar">
                    <div class="menu-item">
                        <button class="menu-button" type="button" aria-expanded="false">File</button>
                        <div class="menu-popup">
                            <button class="menu-action" type="button" data-command="invite"><span>I</span><span>Invite user</span><span>Ctrl+I</span></button>
                            <button class="menu-action" type="button" data-command="create"><span>C</span><span>Create local user</span><span></span></button>
                            <div class="menu-separator"></div>
                            <button class="menu-action" type="button" data-command="export"><span>E</span><span>Export visible CSV</span><span></span></button>
                        </div>
                    </div>
                    <div class="menu-item">
                        <button class="menu-button" type="button" aria-expanded="false">Users</button>
                        <div class="menu-popup">
                            <button class="menu-action" type="button" data-command="bulk-disable"><span>D</span><span>Disable selected</span><span></span></button>
                            <button class="menu-action" type="button" data-command="bulk-enable"><span>U</span><span>Enable selected</span><span></span></button>
                            <button class="menu-action" type="button" data-command="bulk-revoke"><span>R</span><span>Revoke sessions</span><span></span></button>
                        </div>
                    </div>
                    <div class="menu-item">
                        <button class="menu-button" type="button" aria-expanded="false">View</button>
                        <div class="menu-popup">
                            <button class="menu-action" type="button" data-command="refresh"><span>F</span><span>Refresh list</span><span>F5</span></button>
                            <button class="menu-action" type="button" data-command="pending-only"><span>P</span><span>Show pending invites</span><span></span></button>
                            <button class="menu-action" type="button" data-command="clear-filters"><span>X</span><span>Clear filters</span><span></span></button>
                        </div>
                    </div>
                    <div class="menu-item">
                        <button class="menu-button" type="button" aria-expanded="false">Help</button>
                        <div class="menu-popup">
                            <button class="menu-action" type="button" data-command="policy-help"><span>?</span><span>User policy notes</span><span></span></button>
                            <button class="menu-action" type="button" data-command="mock-note"><span>M</span><span>Mock-only notes</span><span></span></button>
                        </div>
                    </div>
                </nav>

                <div class="admin-workspace-body users-page-body">
                    <section class="users-hero">
                        <div>
                            <h2>Accounts, invites, and access</h2>
                            <p>Mock administrative users view for creation, invitation, filtering, and safe bulk actions.</p>
                        </div>
                        <div class="users-hero-actions">
                            <button class="win98-button users-action-button" type="button" data-command="invite">Invite user</button>
                            <button class="win98-button users-action-button" type="button" data-command="create">Create local user</button>
                            <button class="win98-button users-action-button" type="button" data-command="export">Export CSV</button>
                            <button class="win98-button users-action-button" type="button" data-command="policy-help">Policy notes</button>
                        </div>
                    </section>

                    <section class="users-summary-grid">
                        <article class="users-stat-card is-info"><p>Total users</p><strong id="stat-total">0</strong></article>
                        <article class="users-stat-card is-ok"><p>Active</p><strong id="stat-active">0</strong></article>
                        <article class="users-stat-card is-warning"><p>Pending invites</p><strong id="stat-pending">0</strong></article>
                        <article class="users-stat-card is-danger"><p>Disabled</p><strong id="stat-disabled">0</strong></article>
                    </section>

                    <section class="users-main-grid">
                        <section class="users-panel">
                            <div class="users-panel-header">
                                <div class="users-panel-title">Create or invite <span>mock only</span></div>
                            </div>
                            <div class="users-panel-body">
                                <form id="users-form" class="users-form-grid">
                                    <label class="users-field">Mode
                                        <select class="users-select" id="users-mode">
                                            <option value="invite">Send invite</option>
                                            <option value="create">Create local user</option>
                                        </select>
                                    </label>
                                    <label class="users-field">Username<input class="users-input" id="users-username" type="text" autocomplete="off"></label>
                                    <label class="users-field">Email<input class="users-input" id="users-email" type="email" autocomplete="off"></label>
                                    <div class="users-row-two">
                                        <label class="users-field">Role
                                            <select class="users-select" id="users-role">
                                                <option value="uploader">uploader</option>
                                                <option value="operator">operator</option>
                                                <option value="viewer">viewer</option>
                                                <option value="admin">admin</option>
                                            </select>
                                        </label>
                                        <label class="users-field">Plan
                                            <select class="users-select" id="users-plan">
                                                <option value="standard">standard</option>
                                                <option value="trusted">trusted</option>
                                                <option value="guest-like">guest-like</option>
                                                <option value="unlimited">unlimited</option>
                                            </select>
                                        </label>
                                    </div>
                                    <label class="users-check"><input type="checkbox" id="users-send-setup" checked>Send setup instructions</label>
                                    <div class="users-form-actions">
                                        <button class="win98-button users-action-button" type="reset">Clear</button>
                                        <button class="win98-button users-action-button" type="submit">Apply</button>
                                    </div>
                                </form>
                            </div>
                        </section>

                        <section class="users-panel">
                            <div class="users-panel-header">
                                <div class="users-panel-title">Users <span id="visible-pill">0 visible</span></div>
                                <div class="users-panel-tools">
                                    <button class="win98-button users-tool-button" type="button" id="select-visible">Select visible</button>
                                    <button class="win98-button users-tool-button" type="button" data-command="bulk-disable">Disable</button>
                                    <button class="win98-button users-tool-button" type="button" data-command="bulk-enable">Enable</button>
                                    <button class="win98-button users-tool-button" type="button" data-command="bulk-revoke">Revoke</button>
                                </div>
                            </div>
                            <div class="users-panel-body users-list-body">
                                <div class="users-toolbar-grid">
                                    <input class="users-input" id="users-search" type="search" placeholder="Search username or email">
                                    <select class="users-select" id="users-status"><option value="all">all statuses</option><option value="active">active</option><option value="pending">pending</option><option value="disabled">disabled</option></select>
                                    <select class="users-select" id="users-role-filter"><option value="all">all roles</option><option value="admin">admin</option><option value="operator">operator</option><option value="uploader">uploader</option><option value="viewer">viewer</option></select>
                                    <select class="users-select" id="users-sort"><option value="username">sort username</option><option value="createdDesc">newest first</option><option value="lastSeenDesc">last seen</option><option value="boxesDesc">box count</option></select>
                                    <select class="users-select" id="users-size"><option value="8">8 rows</option><option value="12" selected>12 rows</option><option value="20">20 rows</option></select>
                                </div>
                                <div class="users-table-wrap">
                                    <table class="users-table">
                                        <thead>
                                            <tr>
                                                <th class="users-col-check"><input type="checkbox" id="users-master-check"></th>
                                                <th>User</th>
                                                <th>Email</th>
                                                <th>Status</th>
                                                <th>Role</th>
                                                <th>Plan</th>
                                                <th>Boxes</th>
                                                <th>Last seen</th>
                                                <th class="users-col-actions">Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody id="users-body"></tbody>
                                    </table>
                                </div>
                                <div class="users-pagination">
                                    <span id="users-page-info">Page 1</span>
                                    <span id="users-selected-pill">0 selected</span>
                                    <div>
                                        <button class="win98-button users-page-button" type="button" id="users-prev">Prev</button>
                                        <button class="win98-button users-page-button" type="button" id="users-next">Next</button>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </section>
                </div>

                <footer class="status-bar admin-dashboard-statusbar">
                    <span id="users-status-left">Ready. Client-side mock data only.</span>
                    <span>server paging planned</span>
                    <span>admin only</span>
                </footer>
            </div>
        </div>
    </div>

    <div id="toast" class="wb-toast" role="status" aria-live="polite"></div>
    <script src="/static/js/warpbox-ui.js"></script>
    <script src="/static/js/admin/users.js"></script>
</body>
</html>
{{ end }}
