<?php require APPROOT . '/app/Views/layouts/header.php'; ?>

<div class="max-w-7xl mx-auto mb-10 space-y-8">
    <div class="flex flex-col md:flex-row md:items-center justify-between pb-4">
        <div class="mb-4 md:mb-0">
            <h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1"><?php echo $data['title']; ?></h1>
            <p class="text-sm text-gray-600 dark:text-gray-400"><?php echo $data['description']; ?></p>
        </div>
        <a href="<?php echo URLROOT; ?>/admin/addRole" class="w-full md:w-auto bg-primary hover:opacity-90 text-white font-bold py-2 px-4 rounded-lg transition-all focus:ring-4 focus:ring-primary/50 text-sm whitespace-nowrap text-center shadow-sm">
            + Create New Role
        </a>
    </div>

    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700/50 overflow-hidden">
        <div class="p-5 border-b border-gray-200 dark:border-gray-700/50 bg-gray-50 dark:bg-gray-900/40 flex justify-between items-center">
            <h2 class="text-sm font-bold text-gray-900 dark:text-white flex items-center">
                <svg class="w-4 h-4 mr-2 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2"></path></svg>
                Active Roles
            </h2>
        </div>
        <div class="w-full text-gray-900 dark:text-gray-100 p-5">
            <table class="w-full text-left whitespace-nowrap">
                <thead class="border-b border-gray-200 dark:border-gray-700/50">
                    <tr>
                        <th class="px-6 py-4 text-[11px] font-extrabold text-gray-500 dark:text-gray-400 uppercase tracking-widest">Role Name</th>
                        <th class="px-6 py-4 text-[11px] font-extrabold text-gray-500 dark:text-gray-400 uppercase tracking-widest">Description</th>
                        <th class="px-6 py-4 text-right text-[11px] font-extrabold text-gray-500 dark:text-gray-400 uppercase tracking-widest">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <?php if(!empty($data['roles'])): ?>
                        <?php foreach($data['roles'] as $role) : ?>
                        <tr class="border-b border-gray-100 dark:border-gray-700/50 last:border-0 hover:bg-gray-50 dark:hover:bg-gray-700/25 transition-colors">
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-gray-900 dark:text-white"><?php echo htmlspecialchars($role->role_name); ?></td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400"><?php echo htmlspecialchars($role->description); ?></td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium flex justify-end items-center space-x-2">
                                <a href="<?php echo URLROOT; ?>/admin/editRole/<?php echo $role->id; ?>" class="p-1.5 bg-blue-50 dark:bg-blue-900/10 hover:bg-blue-100 dark:hover:bg-blue-900/30 text-primary dark:text-blue-400 border border-blue-200 dark:border-blue-800/30 rounded-md transition-colors shadow-sm" title="Edit Role">
                                    <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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
                                </a>
                                <form action="<?php echo URLROOT; ?>/admin/deleteRole/<?php echo $role->id; ?>" method="POST" onsubmit="confirmAction(event, this, 'Delete Role', 'Are you sure you want to PERMANENTLY delete this role? Users assigned to this role will have their role unassigned.');" class="inline m-0">
                                    <button type="submit" class="p-1.5 bg-red-50 dark:bg-red-900/10 hover:bg-red-100 dark:hover:bg-red-900/30 text-red-600 dark:text-red-400 border border-red-200 dark:border-red-800/30 rounded-md transition-colors shadow-sm cursor-pointer flex items-center justify-center" title="Delete Role">
                                        <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                                    </button>
                                </form>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <tr>
                            <td colspan="3" class="px-6 py-8 text-center text-gray-500 dark:text-gray-400 text-sm italic">No custom staff roles have been created yet.</td>
                        </tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<?php require APPROOT . '/app/Views/layouts/footer.php'; ?>