<!DOCTYPE html>

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

            <!-- Start Page Content here -->
<div class="page-content">
<main>
<div class="container">
<div class="flex flex-wrap justify-between items-center gap-3 my-5">
<div>
<h4 class="page-main-title mb-1.25">Role Details</h4>
<p class="text-default-400">Define and manage roles to streamline operations and ensure secure access control.</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 lg:grid-cols-4 grid-cols-1 gap-base">
<div class="col-span-1">
<div class="card">
<div class="card-body">
<div class="flex items-start mb-7.5">
<div>
<div class="size-12 bg-primary/15 text-primary flex justify-center items-center rounded-full">
<i class="iconify tabler--shield-lock text-2xl"></i>
</div>
</div>
<div class="ms-6">
<h5 class="text-sm mb-1.25">Security Officer</h5>
<p class="text-default-400">Handles platform safety and protocol reviews.</p>
</div>
<div class="ms-auto relative">
<div class="hs-dropdown [--placement:bottom-right] relative inline-flex">
<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-lg"></i>
</button>
<div aria-orientation="vertical" class="hs-dropdown-menu" role="menu">
<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>
<ul class="flex flex-col gap-y-3 mb-base">
<li class="flex items-center gap-3">
<i class="iconify tabler--check text-base text-success"></i>
                                                Daily Risk Assessment
                                            </li>
<li class="flex items-center gap-3">
<i class="iconify tabler--check text-base text-success"></i>
                                                Manage Security Logs
                                            </li>
<li class="flex items-center gap-3">
<i class="iconify tabler--check text-base text-success"></i>
                                                Control Access Rights
                                            </li>
<li class="flex items-center gap-3">
<i class="iconify tabler--check text-base text-success"></i>
                                                Emergency Protocols
                                            </li>
</ul>
<p class="text-sm text-default-400 mb-3">Total 17 users</p>
<div class="flex -space-x-2 items-center mb-base">
<img alt="" class="size-8 rounded-full hover:-translate-y-1 transition-all duration-200" src="/images/users/user-7.jpg"/>
<img alt="" class="size-8 rounded-full hover:-translate-y-1 transition-all duration-200" src="/images/users/user-8.jpg"/>
<img alt="" class="size-8 rounded-full hover:-translate-y-1 transition-all duration-200" src="/images/users/user-9.jpg"/>
<img alt="" class="size-8 rounded-full hover:-translate-y-1 transition-all duration-200" src="/images/users/user-10.jpg"/>
</div>
<div class="flex justify-between">
<span class="flex items-center gap-1.5 text-default-400 text-xs">
<i class="iconify tabler--clock"></i>
                                                Updated 1 hour ago
                                            </span>
<div>
<a aria-controls="editRoleModal" aria-expanded="false" aria-haspopup="dialog" class="btn btn-sm border border-primary text-primary hover:bg-primary hover:text-white rounded-full" data-hs-overlay="#editRoleModal" href="#">Edit Role</a>
</div>
</div>
</div>
</div>
</div>
<div class="lg:col-span-3">
<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" data-table-search="" placeholder="Search Users..." type="search"/>
</div>
<button class="hidden btn bg-danger text-white hover:bg-danger-hover" data-table-delete-selected="">Delete</button>
</div>
<div class="flex flex-wrap items-center gap-3">
<div class="md:flex items-center gap-3">
<span class="me-3 font-semibold text-nowrap">Filter By:</span>
<!-- 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>
</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-products" type="checkbox"/>
</th>
<th data-table-sort="">ID</th>
<th data-table-sort="user">User</th>
<th data-table-sort="">Joined Date</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="text-sm font-semibold hover:text-primary" href="/apps-users-profile">#USR76129</a></h5>
</td>
<td>
<div class="flex gap-3 items-center">
<img alt="Elena Carter" class="size-8 rounded-full" src="/images/users/user-1.jpg"/>
<div>
<h5>
<a class="hover:text-primary" href="#!">Elena Carter</a>
</h5>
<p class="text-default-400 text-xs">elena@webcore.dev</p>
</div>
</div>
</td>
<td>
                                                        19 Jul, 2025
                                                        <small class="text-default-400"> 11:00 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.5">
<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="text-sm font-semibold hover:text-primary" href="/apps-users-profile">#USR58647</a></h5>
</td>
<td>
<div class="flex gap-3 items-center">
<img alt="Jordan Smith" class="size-8 rounded-full" src="/images/users/user-2.jpg"/>
<div>
<h5>
<a class="hover:text-primary" href="/apps-users-profile">Jordan Smith</a>
</h5>
<p class="text-default-400 text-xs">jordan@mediaflow.com</p>
</div>
</div>
</td>
<td>
                                                        21 Jul, 2025
                                                        <small class="text-default-400">9:15 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.5">
<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="text-sm font-semibold hover:text-primary" href="/apps-users-profile">#USR94715</a></h5>
</td>
<td>
<div class="flex gap-3 items-center">
<img alt="Lucas Brown" class="size-8 rounded-full" src="/images/users/user-3.jpg"/>
<div>
<h5>
<a class="hover:text-primary" href="/apps-users-profile">Lucas Brown</a>
</h5>
<p class="text-default-400 text-xs">lucas@intechlabs.com</p>
</div>
</div>
</td>
<td>
                                                        20 Jul, 2025
                                                        <small class="text-default-400">3:00 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.5">
<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="text-sm font-semibold hover:text-primary" href="/apps-users-profile">#USR40289</a></h5>
</td>
<td>
<div class="flex gap-3 items-center">
<img alt="Sophia Green" class="size-8 rounded-full" src="/images/users/user-4.jpg"/>
<div>
<h5>
<a class="hover:text-primary" href="/apps-users-profile">Sophia Green</a>
</h5>
<p class="text-default-400 text-xs">sophia@skygrid.org</p>
</div>
</div>
</td>
<td>
                                                        18 Jul, 2025
                                                        <small class="text-default-400">10:30 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.5">
<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="text-sm font-semibold hover:text-primary" href="/apps-users-profile">#USR23981</a></h5>
</td>
<td>
<div class="flex gap-3 items-center">
<img alt="Ethan Ross" class="size-8 rounded-full" src="/images/users/user-5.jpg"/>
<div>
<h5>
<a class="hover:text-primary" href="/apps-users-profile">Ethan Ross</a>
</h5>
<p class="text-default-400 text-xs">ethan@logico.io</p>
</div>
</div>
</td>
<td>
                                                        17 Jul, 2025
                                                        <small class="text-default-400">5:55 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.5">
<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="text-sm font-semibold hover:text-primary" href="/apps-users-profile">#USR83742</a></h5>
</td>
<td>
<div class="flex gap-3 items-center">
<img alt="Zara Mitchell" class="size-8 rounded-full" src="/images/users/user-6.jpg"/>
<div>
<h5>
<a class="hover:text-primary" href="/apps-users-profile">Zara Mitchell</a>
</h5>
<p class="text-default-400 text-xs">zara@fusionui.com</p>
</div>
</div>
</td>
<td>
                                                        22 Jul, 2025
                                                        <small class="text-default-400">9:10 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.5">
<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="text-sm font-semibold hover:text-primary" href="/apps-users-profile">#USR51268</a></h5>
</td>
<td>
<div class="flex gap-3 items-center">
<img alt="Benjamin Gray" class="size-8 rounded-full" src="/images/users/user-7.jpg"/>
<div>
<h5>
<a class="hover:text-primary" href="/apps-users-profile">Benjamin Gray</a>
</h5>
<p class="text-default-400 text-xs">benjamin@stackpulse.dev</p>
</div>
</div>
</td>
<td>
                                                        20 Jul, 2025
                                                        <small class="text-default-400">6:25 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.5">
<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="text-sm font-semibold hover:text-primary" href="/apps-users-profile">#USR17456</a></h5>
</td>
<td>
<div class="flex gap-3 items-center">
<img alt="Ava Patel" class="size-8 rounded-full" src="/images/users/user-8.jpg"/>
<div>
<h5>
<a class="hover:text-primary" href="/apps-users-profile">Ava Patel</a>
</h5>
<p class="text-default-400 text-xs">ava@cleardash.io</p>
</div>
</div>
</td>
<td>
                                                        23 Jul, 2025
                                                        <small class="text-default-400">8:45 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.5">
<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="text-sm font-semibold hover:text-primary" href="/apps-users-profile">#USR96421</a></h5>
</td>
<td>
<div class="flex gap-3 items-center">
<img alt="Mason Rivera" class="size-8 rounded-full" src="/images/users/user-9.jpg"/>
<div>
<h5>
<a class="hover:text-primary" href="/apps-users-profile">Mason Rivera</a>
</h5>
<p class="text-default-400 text-xs">mason@softmeta.app</p>
</div>
</div>
</td>
<td>
                                                        21 Jul, 2025
                                                        <small class="text-default-400">2: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.5">
<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 10 -->
<tr>
<td>
<input class="form-checkbox form-checkbox-light size-4.5" type="checkbox" value="option"/>
</td>
<td>
<h5><a class="text-sm font-semibold hover:text-primary" href="/apps-users-profile">#USR71539</a></h5>
</td>
<td>
<div class="flex gap-3 items-center">
<img alt="Chloe Walker" class="size-8 rounded-full" src="/images/users/user-10.jpg"/>
<div>
<h5>
<a class="hover:text-primary" href="/apps-users-profile">Chloe Walker</a>
</h5>
<p class="text-default-400 text-xs">chloe@flowbase.org</p>
</div>
</div>
</td>
<td>
                                                        19 Jul, 2025
                                                        <small class="text-default-400">12:35 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.5">
<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>
</div>
</div>
</main>

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

                <div class="hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 hidden fixed inset-0 z-80 overflow-x-hidden overflow-y-auto pointer-events-none" id="editRoleModal">
<div class="flex items-start justify-center min-h-screen p-4 pointer-events-none">
<div class="hs-overlay-animation-target hs-overlay-open:scale-100 hs-overlay-open:opacity-100 scale-95 opacity-0 transition-all duration-200 pointer-events-auto w-full max-w-3xl">
<div class="flex flex-col card">
<div class="card-header p-5">
<h3 class="font-semibold text-default-600" id="editRoleModal-label">Edit Role</h3>
<button aria-label="Close" class="text-default-800" data-hs-overlay="#editRoleModal" type="button">
<i class="iconify tabler--x text-2xl"></i>
</button>
</div>
<!-- Body -->
<div class="card-body">
<div class="grid md:grid-cols-2 gap-4">
<div>
<label class="form-label" for="editRoleName">Role Name</label>
<input class="form-input" id="editRoleName" required="" type="text" value="Developer"/>
</div>
<div>
<label class="form-label" for="editRoleDescription">Description</label>
<input class="form-input" id="editRoleDescription" required="" type="text" value="Builds and maintains the platform core features."/>
</div>
<div class="md:col-span-2">
<label class="form-label" for="editRoleResponsibilities">Responsibilities</label>
<textarea class="form-textarea" id="editRoleResponsibilities" required="" rows="4">
                                            Codebase Maintenance
                                            API Integration
                                            Unit Testing
                                            Feature Deployment</textarea>
<small class="text-default-400">Separate each item by comma or line</small>
</div>
<div class="md:col-span-1">
<label class="form-label" for="editRoleUsers">Assign Users</label>
<select class="form-input min-h-20" id="editRoleUsers" multiple="">
<option selected="" value="1">Leah Kim</option>
<option selected="" value="2">David Tran</option>
<option value="3">Michael Brown</option>
<option value="4">Emma Wilson</option>
</select>
<small class="text-default-400">Hold Ctrl (Windows) or Cmd (Mac) to select multiple users</small>
</div>
<div class="md:col-span-1">
<label class="form-label" for="editRoleIcon">Role Icon</label>
<input class="form-input" id="editRoleIcon" type="text" value="ti ti-code"/>
<small class="text-default-400">Use icon class from your icon library</small>
</div>
</div>
</div>
<!-- Footer -->
<div class="flex justify-end items-center gap-x-2 border-t border-dashed border-default-300 p-5">
<button class="btn bg-light hover:text-primary" data-hs-overlay="#editRoleModal" type="button">Cancel</button>
<button class="btn bg-primary text-white m-1" type="button">Save Changes</button>
</div>
</div>
</div>
</div>
</div>
<div aria-labelledby="addUserModalLabel" class="hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 hidden size-full fixed top-0 start-0 z-80 overflow-x-hidden overflow-y-auto pointer-events-none" id="addUserModal" role="dialog" tabindex="-1">
<div class="hs-overlay-animation-target hs-overlay-open:scale-100 hs-overlay-open:opacity-100 scale-95 opacity-0 ease-in-out transition-all duration-200 lg:max-w-3xl md:max-w-2xl max-w-sm md:w-full m-3 md:mx-auto flex items-center">
<div class="w-full flex flex-col card pointer-events-auto">
<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-base">
<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-input" id="userRole" required="">
<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="block w-full border border-default-300 rounded disabled:opacity-50 disabled:pointer-events-none file:bg-default-100 file:border-0 file:me-4 file:py-2 file:px-3" id="userAvatar" name="file-input" type="file"/>
<small class="text-default-400 text-xs">Optional: Upload avatar image</small>
</div>
</div>
</div>
<div class="flex justify-end items-center gap-x-2 p-5 border-t border-default-300">
<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>