<!DOCTYPE html>

<html lang="en">
<head>
        <?php echo view('partials/title-meta', array('title' => 'Roles')) ?> <?= $this->include('partials/head-css') ?>
    </head>
<body>
<div class="wrapper">
            <?php echo view('partials/topbar', array('subtitle' => 'Pages', 'title' => 'Roles')) ?> <?= $this->include('partials/sidenav') ?>

            <!-- Start Page Content here -->
<div class="page-content">
<main>
                    <?php echo view('partials/page-title', array('subtitle' => 'Users', 'title' => 'Roles')) ?>

                    <div class="container">
<div class="mb-5 flex flex-wrap items-center justify-between gap-3">
<div>
<h4 class="page-main-title mb-1.25">Manage Roles</h4>
<p class="text-default-400">Manage roles for smoother operations and secure access.</p>
</div>
<div>
<a aria-expanded="false" aria-haspopup="dialog" aria-inputs="addRoleModal" class="btn bg-success text-white hover:bg-success-hover" data-hs-overlay="#addRoleModal" href="javascript: void(0);">
<i class="iconify tabler--plus"></i>
                                    Add New Role
                                </a>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-base mb-base">
<div class="card">
<div class="card-body">
<div class="mb-7.5 flex items-start">
<div>
<div class="bg-primary/15 text-primary flex size-12 items-center justify-center rounded-full">
<i class="iconify tabler--shield-lock text-2xl"></i>
</div>
</div>
<div class="ms-6">
<h5 class="mb-1.25 text-sm">Security Officer</h5>
<p class="text-default-400">Handles platform safety and protocol reviews.</p>
</div>
<div class="relative ms-auto">
<div class="hs-dropdown relative inline-flex [--placement:bottom-right]">
<button aria-expanded="false" aria-haspopup="menu" aria-label="Dropdown" class="hs-dropdown-toggle text-lg text-default-400" type="button">
<i class="iconify tabler--dots-vertical text-xl"></i>
</button>
<div aria-orientation="vertical" class="hs-dropdown-menu" role="menu">
<div class="space-y-0.5">
<a class="dropdown-item" href="#">
<i class="iconify tabler--eye"></i>
                                                            View
                                                        </a>
<a class="dropdown-item" href="#">
<i class="iconify tabler--edit"></i>
                                                            Edit
                                                        </a>
<a class="dropdown-item text-danger" href="#">
<i class="iconify tabler--trash"></i>
                                                            Remove
                                                        </a>
</div>
</div>
</div>
</div>
</div>
<ul class="mb-5 flex flex-col gap-y-3">
<li class="flex items-center gap-3">
<i class="iconify tabler--check text-success text-base"></i>
                                            Daily Risk Assessment
                                        </li>
<li class="flex items-center gap-3">
<i class="iconify tabler--check text-success text-base"></i>
                                            Manage Security Logs
                                        </li>
<li class="flex items-center gap-3">
<i class="iconify tabler--check text-success text-base"></i>
                                            input Access Rights
                                        </li>
<li class="flex items-center gap-3">
<i class="iconify tabler--check text-success text-base"></i>
                                            Emergency Protocols
                                        </li>
</ul>
<p class="text-default-400 mb-3 text-sm">Total 4 users</p>
<div class="mb-5 flex items-center -space-x-2">
<img alt="" class="transitio-all size-8 rounded-full duration-200 hover:-translate-y-1" src="/images/users/user-7.jpg"/>
<img alt="" class="transitio-all size-8 rounded-full duration-200 hover:-translate-y-1" src="/images/users/user-8.jpg"/>
<img alt="" class="transitio-all size-8 rounded-full duration-200 hover:-translate-y-1" src="/images/users/user-9.jpg"/>
<img alt="" class="transitio-all size-8 rounded-full duration-200 hover:-translate-y-1" src="/images/users/user-10.jpg"/>
</div>
<div class="flex justify-between">
<span class="text-default-400 flex items-center gap-1.5 text-xs">
<i class="iconify tabler--clock"></i>
                                            Updated 1 hour ago
                                        </span>
<div>
<a class="btn btn-sm border-primary text-primary hover:bg-primary rounded-full border hover:text-white" href="/apps-users-role-details">Details</a>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="mb-7.5 flex items-start">
<div>
<div class="bg-primary/15 text-primary flex size-12 items-center justify-center rounded-full">
<i class="iconify tabler--briefcase text-2xl"></i>
</div>
</div>
<div class="ms-6">
<h5 class="mb-1.25 text-sm">Project Manager</h5>
<p class="text-default-400">Coordinates planning and team delivery timelines.</p>
</div>
<div class="relative ms-auto">
<div class="hs-dropdown relative inline-flex [--placement:bottom-right]">
<button aria-expanded="false" aria-haspopup="menu" aria-label="Dropdown" class="hs-dropdown-toggle text-lg text-default-400" type="button">
<i class="iconify tabler--dots-vertical text-xl"></i>
</button>
<div aria-orientation="vertical" class="hs-dropdown-menu" role="menu">
<div class="space-y-0.5">
<a class="dropdown-item" href="#">
<i class="iconify tabler--eye"></i>
                                                            View
                                                        </a>
<a class="dropdown-item" href="#">
<i class="iconify tabler--edit"></i>
                                                            Edit
                                                        </a>
<a class="dropdown-item text-danger" href="#">
<i class="iconify tabler--trash"></i>
                                                            Remove
                                                        </a>
</div>
</div>
</div>
</div>
</div>
<ul class="mb-5 flex flex-col gap-y-3">
<li class="flex items-center gap-3">
<i class="iconify tabler--check text-success text-base"></i>
                                            Timeline Tracking
                                        </li>
<li class="flex items-center gap-3">
<i class="iconify tabler--check text-success text-base"></i>
                                            Task Assignments
                                        </li>
<li class="flex items-center gap-3">
<i class="iconify tabler--check text-success text-base"></i>
                                            Budget input
                                        </li>
<li class="flex items-center gap-3">
<i class="iconify tabler--check text-success text-base"></i>
                                            Stakeholder Reporting
                                        </li>
</ul>
<p class="text-default-400 mb-3 text-sm">Total 5 users</p>
<div class="mb-5 flex items-center -space-x-2">
<img alt="" class="transitio-all size-8 rounded-full duration-200 hover:-translate-y-1" src="/images/users/user-2.jpg"/>
<img alt="" class="transitio-all size-8 rounded-full duration-200 hover:-translate-y-1" src="/images/users/user-5.jpg"/>
<img alt="" class="transitio-all size-8 rounded-full duration-200 hover:-translate-y-1" src="/images/users/user-6.jpg"/>
<img alt="" class="transitio-all size-8 rounded-full duration-200 hover:-translate-y-1" src="/images/users/user-1.jpg"/>
<img alt="" class="transitio-all size-8 rounded-full duration-200 hover:-translate-y-1" src="/images/users/user-8.jpg"/>
</div>
<div class="flex justify-between">
<span class="text-default-400 flex items-center gap-1.5 text-xs">
<i class="iconify tabler--clock"></i>
                                            Updated 2 hours ago
                                        </span>
<div>
<a class="btn btn-sm border-primary text-primary hover:bg-primary rounded-full border hover:text-white" href="/apps-users-role-details">Details</a>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="mb-7.5 flex items-start">
<div>
<div class="bg-primary/15 text-primary flex size-12 items-center justify-center rounded-full">
<i class="iconify tabler--code text-2xl"></i>
</div>
</div>
<div class="ms-6">
<h5 class="mb-1.25 text-sm">Developer</h5>
<p class="text-default-400">Builds and maintains the platform core features.</p>
</div>
<div class="relative ms-auto">
<div class="hs-dropdown relative inline-flex [--placement:bottom-right]">
<button aria-expanded="false" aria-haspopup="menu" aria-label="Dropdown" class="hs-dropdown-toggle text-lg text-default-400" type="button">
<i class="iconify tabler--dots-vertical text-xl"></i>
</button>
<div aria-orientation="vertical" class="hs-dropdown-menu" role="menu">
<div class="space-y-0.5">
<a class="dropdown-item" href="#">
<i class="iconify tabler--eye"></i>
                                                            View
                                                        </a>
<a class="dropdown-item" href="#">
<i class="iconify tabler--edit"></i>
                                                            Edit
                                                        </a>
<a class="dropdown-item text-danger" href="#">
<i class="iconify tabler--trash"></i>
                                                            Remove
                                                        </a>
</div>
</div>
</div>
</div>
</div>
<ul class="mb-5 flex flex-col gap-y-3">
<li class="flex items-center gap-3">
<i class="iconify tabler--check text-success text-base"></i>
                                            Codebase Maintenance
                                        </li>
<li class="flex items-center gap-3">
<i class="iconify tabler--check text-success text-base"></i>
                                            API Integration
                                        </li>
<li class="flex items-center gap-3">
<i class="iconify tabler--check text-success text-base"></i>
                                            Unit Testing
                                        </li>
<li class="flex items-center gap-3">
<i class="iconify tabler--check text-success text-base"></i>
                                            Feature Deployment
                                        </li>
</ul>
<p class="text-default-400 mb-3 text-sm">Total 6 users</p>
<div class="mb-5 flex items-center -space-x-2">
<img alt="" class="transitio-all size-8 rounded-full duration-200 hover:-translate-y-1" src="/images/users/user-3.jpg"/>
<img alt="" class="transitio-all size-8 rounded-full duration-200 hover:-translate-y-1" src="/images/users/user-4.jpg"/>
<img alt="" class="transitio-all size-8 rounded-full duration-200 hover:-translate-y-1" src="/images/users/user-9.jpg"/>
<img alt="" class="transitio-all size-8 rounded-full duration-200 hover:-translate-y-1" src="/images/users/user-10.jpg"/>
<div class="hs-tooltip transitio-all inline-block duration-200 [--placement:top] hover:-translate-y-1">
<button class="hs-tooltip-toggle bg-primary flex size-8 items-center justify-center rounded-full text-white" type="button">
<span class="font-bold">+2</span>
<span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible bg-default-900 text-default-100 invisible absolute z-10 inline-block w-14 rounded-md px-2 py-1 text-xs font-medium opacity-0 shadow-2xs transition-opacity" role="tooltip">2 More</span>
</button>
</div>
</div>
<div class="flex justify-between">
<span class="text-default-400 flex items-center gap-1.5 text-xs">
<i class="iconify tabler--clock"></i>
                                            Updated 3 hours ago
                                        </span>
<div>
<a class="btn btn-sm border-primary text-primary hover:bg-primary rounded-full border hover:text-white" href="/apps-users-role-details">Details</a>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="mb-7.5 flex items-start">
<div>
<div class="bg-primary/15 text-primary flex size-12 items-center justify-center rounded-full">
<i class="iconify tabler--headset text-2xl"></i>
</div>
</div>
<div class="ms-6">
<h5 class="mb-1.25 text-sm">Support Lead</h5>
<p class="text-default-400">Oversees customer support and service quality.</p>
</div>
<div class="relative ms-auto">
<div class="hs-dropdown relative inline-flex [--placement:bottom-right]">
<button aria-expanded="false" aria-haspopup="menu" aria-label="Dropdown" class="hs-dropdown-toggle text-lg text-default-400" type="button">
<i class="iconify tabler--dots-vertical text-xl"></i>
</button>
<div aria-orientation="vertical" class="hs-dropdown-menu" role="menu">
<div class="space-y-0.5">
<a class="dropdown-item" href="#">
<i class="iconify tabler--eye"></i>
                                                            View
                                                        </a>
<a class="dropdown-item" href="#">
<i class="iconify tabler--edit"></i>
                                                            Edit
                                                        </a>
<a class="dropdown-item text-danger" href="#">
<i class="iconify tabler--trash"></i>
                                                            Remove
                                                        </a>
</div>
</div>
</div>
</div>
</div>
<ul class="mb-5 flex flex-col gap-y-3">
<li class="flex items-center gap-3">
<i class="iconify tabler--check text-success text-base"></i>
                                            Respond to Tickets
                                        </li>
<li class="flex items-center gap-3">
<i class="iconify tabler--check text-success text-base"></i>
                                            Live Chat Supervision
                                        </li>
<li class="flex items-center gap-3">
<i class="iconify tabler--check text-success text-base"></i>
                                            FAQ Updates
                                        </li>
<li class="flex items-center gap-3">
<i class="iconify tabler--check text-success text-base"></i>
                                            Support Metrics Review
                                        </li>
</ul>
<p class="text-default-400 mb-3 text-sm">Total 3 users</p>
<div class="mb-5 flex items-center -space-x-2">
<img alt="" class="transitio-all size-8 rounded-full duration-200 hover:-translate-y-1" src="/images/users/user-1.jpg"/>
<img alt="" class="transitio-all size-8 rounded-full duration-200 hover:-translate-y-1" src="/images/users/user-5.jpg"/>
<img alt="" class="transitio-all size-8 rounded-full duration-200 hover:-translate-y-1" src="/images/users/user-7.jpg"/>
</div>
<div class="flex justify-between">
<span class="text-default-400 flex items-center gap-1.5 text-xs">
<i class="iconify tabler--clock"></i>
                                            Updated 30 min ago
                                        </span>
<div>
<a class="btn btn-sm border-primary text-primary hover:bg-primary rounded-full border hover:text-white" href="/apps-users-role-details">Details</a>
</div>
</div>
</div>
</div>
</div>
<div class="card" data-table="" data-table-rows-per-page="8">
<div class="card-header">
<div class="flex gap-2">
<div class="input-icon-group">
<i class="iconify tabler--search input-icon"></i>
<input class="form-input" placeholder="Search Users..." type="search"/>
</div>
<button class="btn bg-danger text-white hover:bg-danger-hover hidden" data-table-delete-selected="">Delete</button>
</div>
<div class="flex flex-wrap items-center gap-3">
<div class="items-center gap-3 md:flex">
<span class="me-3 font-semibold text-nowrap">Filter By:</span>
<!-- Role Type Filter -->
<div class="input-icon-group">
<i class="iconify tabler--user-hexagon input-icon"></i>
<select class="form-select" data-table-filter="roles">
<option value="">Role</option>
<option value="Security Officer">Security Officer</option>
<option value="Project Manager">Project Manager</option>
<option value="Developer">Developer</option>
<option value="Support Lead">Support Lead</option>
</select>
</div>
</div>
<!-- Status Filter -->
<div class="input-icon-group">
<i class="iconify tabler--user-check input-icon"></i>
<select class="form-select" data-table-filter="status">
<option value="">Status</option>
<option value="Active">Active</option>
<option value="Inactive">Inactive</option>
<option value="Suspended">Suspended</option>
</select>
</div>
<!-- Records Per Page -->
<div>
<select class="form-select" data-table-set-rows-per-page="">
<option value="5">5</option>
<option value="8">8</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
</div>
<button aria-expanded="false" aria-haspopup="dialog" aria-inputs="addUserModal" class="btn bg-secondary text-white hover:bg-secondary-hover" data-hs-overlay="#addUserModal" type="button">Add User</button>
</div>
</div>
<div class="table-wrapper">
<table class="table table-hover">
<thead class="thead-sm">
<tr class="bg-light/25 text-2xs uppercase">
<th class="w-[1%]">
<input class="form-checkbox form-checkbox-light size-4.5" data-table-select-all="" id="select-all-files" type="checkbox"/>
</th>
<th data-table-sort="">ID</th>
<th data-table-sort="user">User</th>
<th data-column="roles" data-table-sort="">Role</th>
<th data-table-sort="">Last Updated</th>
<th data-column="status" data-table-sort="">Status</th>
<th class="text-center">Actions</th>
</tr>
</thead>
<tbody>
<!-- Row 1 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<h5>
<a class="hover:text-primary" href="#">#USR00123</a>
</h5>
</td>
<td>
<div class="flex items-center gap-3">
<div>
<img alt="" class="size-8 rounded-full" src="/images/users/user-5.jpg"/>
</div>
<div>
<h5>
<a class="hover:text-primary" data-sort="user" href="#!">Nathan Young</a>
</h5>
<p class="text-default-400 text-xs">nathan@companymail.com</p>
</div>
</div>
</td>
<td>Project Manager</td>
<td>
                                                18 Apr, 2025
                                                <small class="text-default-400">9:45 AM</small>
</td>
<td>
<span class="badge badge-label bg-warning/15 text-warning">Inactive</span>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<!-- Row 2 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<h5>
<a class="hover:text-primary" href="#">#USR00145</a>
</h5>
</td>
<td>
<div class="flex items-center gap-3">
<div>
<img alt="" class="size-8 rounded-full" src="/images/users/user-3.jpg"/>
</div>
<div>
<h5>
<a class="hover:text-primary" data-sort="user" href="#!">Leah Kim</a>
</h5>
<p class="text-default-400 text-xs">leah@wavehub.io</p>
</div>
</div>
</td>
<td>Developer</td>
<td>
                                                21 Apr, 2025
                                                <small class="text-default-400">3:15 PM</small>
</td>
<td>
<span class="badge badge-label bg-success/15 text-success">Active</span>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<!-- Row 3 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<h5>
<a class="hover:text-primary" href="#">#USR00162</a>
</h5>
</td>
<td>
<div class="flex items-center gap-3">
<div>
<img alt="" class="size-8 rounded-full" src="/images/users/user-1.jpg"/>
</div>
<div>
<h5>
<a class="hover:text-primary" data-sort="user" href="#!">Sophie Lee</a>
</h5>
<p class="text-default-400 text-xs">sophie@infrakit.io</p>
</div>
</div>
</td>
<td>Support Lead</td>
<td>
                                                19 Apr, 2025
                                                <small class="text-default-400">10:00 AM</small>
</td>
<td>
<span class="badge badge-label bg-danger/15 text-danger">Suspended</span>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<!-- Row 4 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<h5>
<a class="hover:text-primary" href="#">#USR00178</a>
</h5>
</td>
<td>
<div class="flex items-center gap-3">
<div>
<img alt="" class="size-8 rounded-full" src="/images/users/user-2.jpg"/>
</div>
<div>
<h5>
<a class="hover:text-primary" data-sort="user" href="#!">David Tran</a>
</h5>
<p class="text-default-400 text-xs">david@devsync.com</p>
</div>
</div>
</td>
<td>Developer</td>
<td>
                                                22 Apr, 2025
                                                <small class="text-default-400">8:15 AM</small>
</td>
<td>
<span class="badge badge-label bg-success/15 text-success">Active</span>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<!-- Row 5 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<h5>
<a class="hover:text-primary" href="#">#USR00189</a>
</h5>
</td>
<td>
<div class="flex items-center gap-3">
<div>
<img alt="" class="size-8 rounded-full" src="/images/users/user-4.jpg"/>
</div>
<div>
<h5>
<a class="hover:text-primary" data-sort="user" href="#!">Isabella Moore</a>
</h5>
<p class="text-default-400 text-xs">isabella@tracklog.com</p>
</div>
</div>
</td>
<td>Security Officer</td>
<td>
                                                20 Apr, 2025
                                                <small class="text-default-400">2:45 PM</small>
</td>
<td>
<span class="badge badge-label bg-success/15 text-success">Active</span>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<!-- Row 6 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<h5>
<a class="hover:text-primary" href="#">#USR00203</a>
</h5>
</td>
<td>
<div class="flex items-center gap-3">
<div>
<img alt="" class="size-8 rounded-full" src="/images/users/user-6.jpg"/>
</div>
<div>
<h5>
<a class="hover:text-primary" data-sort="user" href="#!">Daniel Cooper</a>
</h5>
<p class="text-default-400 text-xs">daniel@cloudops.dev</p>
</div>
</div>
</td>
<td>Support Lead</td>
<td>
                                                15 Apr, 2025
                                                <small class="text-default-400">11:20 AM</small>
</td>
<td>
<span class="badge badge-label bg-warning/15 text-warning">Inactive</span>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<!-- Row 7 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<h5>
<a class="hover:text-primary" href="#">#USR00215</a>
</h5>
</td>
<td>
<div class="flex items-center gap-3">
<div>
<img alt="" class="size-8 rounded-full" src="/images/users/user-8.jpg"/>
</div>
<div>
<h5>
<a class="hover:text-primary" data-sort="user" href="#!">Ava Thompson</a>
</h5>
<p class="text-default-400 text-xs">ava@digitalsphere.io</p>
</div>
</div>
</td>
<td>Developer</td>
<td>
                                                23 Apr, 2025
                                                <small class="text-default-400">4:25 PM</small>
</td>
<td>
<span class="badge badge-label bg-success/15 text-success">Active</span>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<!-- Row 8 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<h5>
<a class="hover:text-primary" href="#">#USR00228</a>
</h5>
</td>
<td>
<div class="flex items-center gap-3">
<div>
<img alt="" class="size-8 rounded-full" src="/images/users/user-9.jpg"/>
</div>
<div>
<h5>
<a class="hover:text-primary" data-sort="user" href="#!">Mason Carter</a>
</h5>
<p class="text-default-400 text-xs">mason@buildzone.io</p>
</div>
</div>
</td>
<td>Security Officer</td>
<td>
                                                17 Apr, 2025
                                                <small class="text-default-400">6:10 PM</small>
</td>
<td>
<span class="badge badge-label bg-danger/15 text-danger">Suspended</span>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
<!-- Row 9 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<h5>
<a class="hover:text-primary" href="#">#USR00239</a>
</h5>
</td>
<td>
<div class="flex items-center gap-3">
<div>
<img alt="" class="size-8 rounded-full" src="/images/users/user-10.jpg"/>
</div>
<div>
<h5>
<a class="hover:text-primary" data-sort="user" href="#!">Chloe Adams</a>
</h5>
<p class="text-default-400 text-xs">chloe@infraops.io</p>
</div>
</div>
</td>
<td>Project Manager</td>
<td>
                                                11 Apr, 2025
                                                <small class="text-default-400">1:30 PM</small>
</td>
<td>
<span class="badge badge-label bg-warning/15 text-warning">Inactive</span>
</td>
<td>
<div class="flex justify-center gap-1.25">
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--eye text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" href="#">
<i class="iconify tabler--edit text-base"></i>
</a>
<a class="btn btn-icon btn-sm border border-default-300 hover:border-default-400" data-table-delete-row="" href="#">
<i class="iconify tabler--trash text-base"></i>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer">
<div data-table-pagination-info="roles"></div>
<div data-table-pagination=""></div>
</div>
</div>
</div>
</main>

                <?= $this->include('partials/footer') ?>

                <div aria-labelledby="addRoleModalLabel" class="hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 pointer-events-none fixed start-0 top-0 z-80 hidden size-full overflow-x-hidden overflow-y-auto" id="addRoleModal" role="dialog" tabindex="-1">
<div class="hs-overlay-animation-target hs-overlay-open:scale-100 hs-overlay-open:opacity-100 m-3 flex max-w-sm scale-95 items-center opacity-0 transition-all duration-200 ease-in-out md:mx-auto md:w-full md:max-w-2xl lg:max-w-3xl">
<div class="card pointer-events-auto flex w-full flex-col">
<div class="card-header p-5">
<h3 class="text-sm" id="addRoleModalLabel">Add New Role</h3>
<button aria-label="Close" data-hs-overlay="#addRoleModal" type="button">
<i class="iconify tabler--x text-xl"></i>
</button>
</div>
<div class="card-body overflow-y-auto">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="form-label" for="roleName">Role Name</label>
<input class="form-input" id="roleName" placeholder="e.g. Developer, Project Manager" required="" type="text"/>
</div>
<div>
<label class="form-label" for="roleDescription">Description</label>
<input class="form-input" id="roleDescription" placeholder="Brief description" required="" type="text"/>
</div>
<div class="md:col-span-2">
<label class="form-label" for="roleResponsibilities">Key Responsibilities</label>
<textarea class="form-textarea" id="roleResponsibilities" placeholder="Enter responsibilities separated by commas or lines" required="" rows="4"></textarea>
<small class="text-default-400 text-xs">Example: Codebase Maintenance, API Integration, Unit Testing</small>
</div>
<div>
<label class="form-label" for="roleUsers">Assign Users</label>
<select class="form-textarea" id="roleUsers" multiple="">
<option value="1">John Doe</option>
<option value="2">Sarah Smith</option>
<option value="3">Michael Brown</option>
<option value="4">Emma Wilson</option>
</select>
<small class="text-default-400 text-xs">Hold Ctrl (Windows) or Cmd (Mac) to select multiple users</small>
</div>
<div>
<label class="form-label" for="roleIcon">Role Icon</label>
<input class="form-input" id="roleIcon" placeholder="e.g. shield, briefcase" type="text"/>
<small class="text-default-400 text-xs">Use icon class from your icon library</small>
</div>
</div>
</div>
<div class="border-default-300 flex items-center justify-end gap-x-2 border-t p-4">
<button class="btn bg-light hover:text-primary" data-hs-overlay="#addRoleModal" type="button">Cancel</button>
<button class="btn bg-primary text-white hover:bg-primary-hover" type="button">Add Role</button>
</div>
</div>
</div>
</div>
<div aria-labelledby="addUserModalLabel" class="hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 pointer-events-none fixed start-0 top-0 z-80 hidden size-full overflow-x-hidden overflow-y-auto" id="addUserModal" role="dialog" tabindex="-1">
<div class="hs-overlay-animation-target hs-overlay-open:scale-100 hs-overlay-open:opacity-100 m-3 flex max-w-sm scale-95 items-center opacity-0 transition-all duration-200 ease-in-out md:mx-auto md:w-full md:max-w-2xl lg:max-w-3xl">
<div class="card pointer-events-auto flex w-full flex-col">
<div class="card-header p-5">
<h3 class="text-sm" id="addUserModalLabel">Add New User</h3>
<button aria-label="Close" data-hs-overlay="#addUserModal" type="button">
<i class="iconify tabler--x text-xl"></i>
</button>
</div>
<div class="card-body overflow-y-auto">
<div class="grid grid-cols-2 gap-4">
<div>
<label class="form-label" for="userFullName">Full Name</label>
<input class="form-input" id="userFullName" placeholder="Enter full name" required="" type="text"/>
</div>
<div>
<label class="form-label" for="userEmail">Email Address</label>
<input class="form-input" id="userEmail" placeholder="Enter email" required="" type="email"/>
</div>
<div>
<label class="form-label" for="userRole">Role</label>
<select class="form-textarea" id="userRole" multiple="">
<option value="">Select role</option>
<option value="Project Manager">Project Manager</option>
<option value="Developer">Developer</option>
<option value="Support Lead">Support Lead</option>
<option value="Security Officer">Security Officer</option>
</select>
</div>
<div>
<label class="form-label" for="userStatus">Status</label>
<select class="form-input" id="userStatus" required="">
<option value="">Select status</option>
<option value="Active">Active</option>
<option value="Inactive">Inactive</option>
<option value="Suspended">Suspended</option>
</select>
</div>
<div>
<label class="form-label" for="userAvatar">User Avatar</label>
<input class="form-input" id="userAvatar" name="file-input" type="file"/>
<small class="text-default-400 text-xs">Optional: Upload avatar image</small>
</div>
</div>
</div>
<div class="border-default-300 flex items-center justify-end gap-x-2 border-t p-5">
<button class="btn bg-light hover:text-primary" data-hs-overlay="#addUserModal" type="button">Cancel</button>
<button class="btn bg-primary text-white hover:bg-primary-hover" type="button">Add User</button>
</div>
</div>
</div>
</div>
</div>
<!-- End Page content -->
</div>

        <?= $this->include('partials/customizer') ?> <?= $this->include('partials/footer-scripts') ?>

        <!-- Custom table -->
<script src="/js/pages/custom-table.js"></script>
</body>
</html>