<h1>User Management</h1>

<div class="card">
    <table style="width: 100%; border-collapse: collapse;">
        <thead>
            <tr style="border-bottom: 2px solid var(--border); text-align: left;">
                <th style="padding: 1rem;">ID</th>
                <th style="padding: 1rem;">User</th>
                <th style="padding: 1rem;">Email</th>
                <th style="padding: 1rem;">Role</th>
                <th style="padding: 1rem;">Reputation</th>
                <th style="padding: 1rem;">Actions</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach ($users as $user): ?>
                <tr style="border-bottom: 1px solid var(--border);">
                    <td style="padding: 1rem;"><?= $user['id'] ?></td>
                    <td style="padding: 1rem; display: flex; align-items: center; gap: 0.5rem;">
                        <img src="/assets/img/<?= $user['avatar'] ?>" style="width: 32px; height: 32px; border-radius: 50%;">
                        <?= $user['username'] ?>
                    </td>
                    <td style="padding: 1rem;"><?= $user['email'] ?></td>
                    <td style="padding: 1rem;">
                        <?php 
                        $roles = [1 => 'User', 2 => 'Moderator', 3 => 'Admin'];
                        echo $roles[$user['role_id']] ?? 'Unknown';
                        ?>
                    </td>
                    <td style="padding: 1rem;"><?= $user['reputation'] ?></td>
                    <td style="padding: 1rem;">
                        <button class="btn" style="padding: 0.25rem 0.5rem;"><i class="fas fa-edit"></i></button>
                        <button class="btn" style="padding: 0.25rem 0.5rem; color: #ef4444;"><i class="fas fa-trash"></i></button>
                    </td>
                </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
</div>
