<h2 class="mb-4"><i class="bi bi-people"></i> Gebruikers</h2>

<div class="row g-4">
    <!-- Users list -->
    <div class="col-md-7">
        <div class="card shadow-sm">
            <div class="card-header"><i class="bi bi-list"></i> Huidige gebruikers</div>
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead>
                        <tr>
                            <th>Gebruikersnaam</th>
                            <th>Rol</th>
                            <th>Aangemaakt</th>
                            <th style="width: 160px;">Acties</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($users as $u): ?>
                            <tr>
                                <td>
                                    <i class="bi bi-person-circle"></i>
                                    <?= htmlspecialchars($u['username']) ?>
                                    <?php if ($u['username'] === $user['username']): ?>
                                        <span class="badge bg-info">Jij</span>
                                    <?php endif; ?>
                                </td>
                                <td><span class="badge bg-primary"><?= htmlspecialchars($u['role']) ?></span></td>
                                <td class="text-muted"><?= htmlspecialchars($u['created']) ?></td>
                                <td>
                                    <!-- Change password -->
                                    <form method="POST" action="/admin/users" class="d-inline">
                                        <input type="hidden" name="csrf_token" value="<?= $csrf ?>">
                                        <input type="hidden" name="action" value="change_password">
                                        <input type="hidden" name="pw_username" value="<?= htmlspecialchars($u['username']) ?>">
                                        <div class="input-group input-group-sm d-inline-flex" style="width: auto;">
                                            <input type="password" name="new_password" placeholder="Nieuw ww" class="form-control form-control-sm" style="width: 100px;" required minlength="8">
                                            <button type="submit" class="btn btn-sm btn-outline-warning" title="Wachtwoord wijzigen">
                                                <i class="bi bi-key"></i>
                                            </button>
                                        </div>
                                    </form>
                                    <?php if ($u['username'] !== $user['username']): ?>
                                        <form method="POST" action="/admin/users" class="d-inline ms-1" onsubmit="return confirm('Weet je zeker dat je deze gebruiker wilt verwijderen?')">
                                            <input type="hidden" name="csrf_token" value="<?= $csrf ?>">
                                            <input type="hidden" name="action" value="delete">
                                            <input type="hidden" name="delete_username" value="<?= htmlspecialchars($u['username']) ?>">
                                            <button type="submit" class="btn btn-sm btn-outline-danger" title="Verwijderen">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </form>
                                    <?php endif; ?>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Add user form -->
    <div class="col-md-5">
        <div class="card shadow-sm">
            <div class="card-header"><i class="bi bi-person-plus"></i> Gebruiker toevoegen</div>
            <div class="card-body">
                <form method="POST" action="/admin/users">
                    <input type="hidden" name="csrf_token" value="<?= $csrf ?>">
                    <input type="hidden" name="action" value="add">
                    <div class="mb-3">
                        <label for="username" class="form-label">Gebruikersnaam</label>
                        <input type="text" class="form-control" id="username" name="username" required>
                    </div>
                    <div class="mb-3">
                        <label for="password" class="form-label">Wachtwoord</label>
                        <input type="password" class="form-control" id="password" name="password" required minlength="8">
                        <small class="form-text text-muted">Minimaal 8 tekens.</small>
                    </div>
                    <div class="mb-3">
                        <label for="role" class="form-label">Rol</label>
                        <select class="form-select" id="role" name="role">
                            <option value="admin">Admin</option>
                            <option value="editor">Editor</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-person-plus"></i> Toevoegen
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
