<div class="card">
    <div class="card-body">
        <h4 class="card-title">Roles Created</h4>
        <table id="exampleRoles" class="table display table-bordered table-striped">
            <thead>
                <tr class="text-center">
                    <th>ID</th>
                    <th>Role Name</th>
                    <th>Label</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <?php if (!empty($roles)): ?>
                    <?php foreach ($roles as $role): ?>
                        <tr class="text-center">
                            <td><?= $role->id ?></td>
                            <td><?= $role->name ?></td>
                            <td><?= $role->label ?></td>
                            <td>
                                <!-- EDIT MODAL TRIGGER -->
                                <a href="javascript:void(0);" 
                                   class="role-edit-modal" 
                                   data-id="<?= $role->id ?>" 
                                   data-name="<?= $role->name ?>" 
                                   data-label="<?= $role->label ?>">
                                    <i class="fa fa-edit text-warning"></i>
                                </a>

                                <!-- DELETE CONFIRMATION -->
                                <a href="javascript:void(0);" 
                                   class="delete-confirmation-modal" 
                                   data-url="<?= base_url('admin/rolepermissions/delete_role/' . $role->id) ?>">
                                    <i class="fa fa-trash text-danger"></i>
                                </a>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                <?php else: ?>
                    <tr><td colspan="4" class="text-center">No roles found.</td></tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>