<div class="admin-page-actions">
    <form class="admin-filters" action="<?= e(url('/admin/users')) ?>" method="get">
        <input type="search" name="q" value="<?= e($query) ?>" placeholder="Search name, email, or phone">
        <button class="button button-small" type="submit">Search</button>
    </form>
</div>

<section class="admin-panel">
    <div class="admin-panel-heading">
        <div><span class="eyebrow">Access and roster</span><h2>Users & Staff</h2></div>
        <span class="count-badge"><?= count($users) ?> shown</span>
    </div>
    <div class="editable-list">
        <?php foreach ($users as $user): ?>
            <details>
                <summary>
                    <span class="avatar"><?= e(strtoupper(substr((string) $user['full_name'], 0, 1))) ?></span>
                    <span><strong><?= e($user['full_name']) ?></strong><small><?= e($user['email']) ?> &middot; <?= e($user['phone']) ?> &middot; Email 2FA <?= !empty($user['two_factor_enabled']) ? 'on' : 'off' ?></small></span>
                    <span class="role-badge"><?= e(ucfirst((string) $user['role'])) ?></span>
                    <span class="status-dot <?= $user['active'] ? 'is-on' : '' ?>"><?= $user['active'] ? 'Active' : 'Disabled' ?></span>
                    <span class="edit-label">Edit</span>
                </summary>
                <form class="inline-editor form-stack" action="<?= e(url('/admin/user/save')) ?>" method="post">
                    <?= csrf_field() ?>
                    <input type="hidden" name="id" value="<?= (int) $user['id'] ?>">
                    <div class="form-grid">
                        <label>Full name<input type="text" name="full_name" required value="<?= e($user['full_name']) ?>"></label>
                        <label>Phone<input type="tel" name="phone" value="<?= e($user['phone']) ?>"></label>
                        <label>Role
                            <select name="role">
                                <?php foreach (['customer', 'staff', 'manager', 'admin'] as $role): ?><option value="<?= $role ?>" <?= selected($user['role'], $role) ?>><?= e(ucfirst($role)) ?></option><?php endforeach; ?>
                            </select>
                        </label>
                    </div>
                    <div class="check-row">
                        <label class="check-control compact"><input type="checkbox" name="active" value="1" <?= checked($user['active']) ?>><span><strong>Active account</strong></span></label>
                        <label class="check-control compact"><input type="checkbox" name="newsletter_opt_in" value="1" <?= checked($user['newsletter_opt_in']) ?>><span><strong>News opted in</strong></span></label>
                        <label class="check-control compact"><input type="checkbox" name="two_factor_enabled" value="1" <?= checked($user['two_factor_enabled'] ?? 0) ?>><span><strong>Email 2FA</strong></span></label>
                    </div>
                    <button class="button button-small" type="submit">Save User</button>
                </form>
            </details>
        <?php endforeach; ?>
    </div>
    <details class="new-record">
        <summary>+ Add Staff Member</summary>
        <form class="inline-editor form-stack" action="<?= e(url('/admin/user/save')) ?>" method="post">
            <?= csrf_field() ?>
            <div class="form-grid form-grid-three">
                <label>Full name<input type="text" name="full_name" required></label>
                <label>Email<input type="email" name="email" required></label>
                <label>Phone<input type="tel" name="phone"></label>
                <label>Temporary password<input type="password" name="password" required minlength="10"></label>
                <label>Role
                    <select name="role"><option value="staff">Staff</option><option value="manager">Manager</option><option value="admin">Administrator</option><option value="customer">Customer</option></select>
                </label>
            </div>
            <div class="check-row">
                <label class="check-control compact"><input type="checkbox" name="active" value="1" checked><span><strong>Active account</strong></span></label>
                <label class="check-control compact"><input type="checkbox" name="newsletter_opt_in" value="1"><span><strong>News opted in</strong></span></label>
                <label class="check-control compact"><input type="checkbox" name="two_factor_enabled" value="1"><span><strong>Email 2FA</strong></span></label>
            </div>
            <button class="button button-small" type="submit">Create User</button>
        </form>
    </details>
</section>
