<div class="page-header">
    <div>
        <a href="<?= APP_URL ?>/dashboard" class="btn btn-ghost btn-sm mb-4" style="padding-left:0;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
            Back to Dashboard
        </a>
        <h1>Roles & Permissions</h1>
        <div class="page-subtitle">Manage custom roles and assign menu-based permissions.</div>
    </div>
    <div>
        <a href="<?= APP_URL ?>/users" class="btn btn-ghost mr-2">Manage Users</a>
        <a href="<?= APP_URL ?>/roles/create" class="btn btn-primary">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
            Create Role
        </a>
    </div>
</div>

<div class="card mb-6">
    <div class="table-wrapper">
        <table>
            <thead>
                <tr>
                    <th>Role Name</th>
                    <th>Description</th>
                    <th>Users</th>
                    <th>Type</th>
                    <th style="width: 120px;"></th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($roles as $role): ?>
                <tr>
                    <td>
                        <div class="font-bold"><?= e($role['name']) ?></div>
                    </td>
                    <td class="text-sm text-muted"><?= e($role['description'] ?? '-') ?></td>
                    <td>
                        <span class="badge badge-info"><?= $role['user_count'] ?> users</span>
                    </td>
                    <td>
                        <?php if ($role['is_system']): ?>
                            <span class="badge badge-muted">System</span>
                        <?php else: ?>
                            <span class="badge badge-success">Custom</span>
                        <?php endif; ?>
                    </td>
                    <td class="text-right">
                        <a href="<?= APP_URL ?>/roles/<?= $role['id'] ?>/edit" class="btn btn-ghost btn-icon" title="Edit">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
                        </a>
                        <form method="POST" action="<?= APP_URL ?>/roles/<?= $role['id'] ?>/delete" style="display:inline;" onsubmit="return confirm('Are you sure you want to delete the role \'<?= e($role['name']) ?>\'? This action cannot be undone.');">
                            <input type="hidden" name="csrf_token" value="<?= Security::generateCsrfToken() ?>">
                            <button type="submit" class="btn btn-ghost btn-icon text-danger" title="Delete Role">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
                            </button>
                        </form>

                    </td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>
