<div class="flex items-center justify-between mb-6">
    <div><h1 class="text-2xl font-bold text-gray-900">Roles & Permissions</h1><p class="text-sm text-gray-500 mt-1">Manage user roles and access levels</p></div>
    <a href="?page=roles&action=create" class="inline-flex items-center gap-2 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition text-sm font-medium"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>Create Role</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <?php foreach ($roles ?? [] as $r): ?>
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition">
            <div class="flex items-start justify-between mb-3">
                <div>
                    <h3 class="font-semibold text-gray-900"><?= htmlspecialchars($r['name']) ?></h3>
                    <p class="text-xs text-gray-500 mt-0.5"><?= $r['user_count'] ?> user<?= $r['user_count'] != 1 ? 's' : '' ?></p>
                </div>
                <?php if ($r['is_system']): ?><span class="inline-flex px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600">System</span><?php endif; ?>
            </div>
            <?php if ($r['description']): ?><p class="text-sm text-gray-600 mb-4"><?= htmlspecialchars($r['description']) ?></p><?php endif; ?>
            <div class="flex gap-2">
                <a href="?page=roles&action=edit&id=<?= $r['id'] ?>" class="flex-1 text-center px-3 py-1.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 text-xs font-medium"><?= $r['is_system'] ? 'View' : 'Edit' ?></a>
                <?php if (!$r['is_system']): ?><form method="POST" action="?page=roles&action=delete&id=<?= $r['id'] ?>" onsubmit="return confirm('Delete this role?')" class="flex-1"><?= CSRF::field() ?><button class="w-full px-3 py-1.5 border border-red-300 text-red-600 rounded-lg hover:bg-red-50 text-xs font-medium">Delete</button></form><?php endif; ?>
            </div>
        </div>
    <?php endforeach; ?>
    <?php if (empty($roles)): ?><div class="col-span-full text-center py-12 text-gray-400">No roles configured yet.</div><?php endif; ?>
</div>
