{% extends 'layouts/vertical.html' %}

{% load static i18n %}

{% block title %}User Permissions{% endblock title %}

{% block page_content %}

<div class="container-fluid">

  {% include 'partials/page-title.html' with title='Permissions' subtitle='Users' %}

  <div class="row justify-content-center">
    <div class="col-xxl-10">

      <div data-table data-table-rows-per-page="8" class="card">
        <div class="card-header border-light justify-content-between">
          <div class="d-flex gap-2">
            <div class="app-search">
              <input data-table-search type="search" class="form-control" placeholder="Search permissions...">
              <i data-lucide="search" class="app-search-icon text-muted"></i>
            </div>
            <button data-table-delete-selected class="btn btn-danger d-none">Delete</button>
          </div>

          <!-- Records Per Page -->
          <div>
            <select data-table-set-rows-per-page class="form-select form-control my-1 my-md-0">
              <option value="5">5</option>
              <option value="10">10</option>
              <option value="15">15</option>
              <option value="20">20</option>
            </select>
          </div>
        </div>


        <div class="table-responsive">
          <table class="table table-custom table-centered table-select table-hover w-100 mb-0">
            <thead class="bg-light align-middle bg-opacity-25 thead-sm">
            <tr class="text-uppercase fs-xxs">
              <th data-table-sort>Name</th>
              <th>Assign To</th>
              <th data-table-sort>Created Date</th>
              <th data-table-sort>Users</th>
              <th class="text-center">Actions</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>User Management</td>
              <td><span class="badge bg-primary-subtle text-primary badge-label fs-xxs fw-semibold">Administrator</span>
              </td>
              <td>24 Jun 2025, <span class="text-muted">6:43 am</span></td>
              <td>12</td>
              <td class="text-center">
                <a href="#" class="btn btn-light btn-icon btn-sm rounded-circle"><i class="ti ti-eye fs-lg"></i></a>
                <a href="#" data-table-delete-row class="btn btn-light btn-icon btn-sm rounded-circle"><i
                  class="ti ti-trash fs-lg"></i></a>
              </td>
            </tr>
            <tr>
              <td>Content Management</td>
              <td>
                <span class="badge bg-primary-subtle text-primary badge-label fs-xxs fw-semibold">Administrator</span>
                <span class="badge bg-danger-subtle text-danger badge-label fs-xxs fw-semibold">Developer</span>
                <span class="badge bg-info-subtle text-info badge-label fs-xxs fw-semibold">Analyst</span>
                <span class="badge bg-purple-subtle text-purple badge-label fs-xxs fw-semibold">Support</span>
                <span class="badge bg-warning-subtle text-warning badge-label fs-xxs fw-semibold">Trial</span>
              </td>
              <td>21 Feb 2025, <span class="text-muted">11:05 am</span></td>
              <td>5</td>
              <td class="text-center">
                <a href="#" class="btn btn-light btn-icon btn-sm rounded-circle"><i class="ti ti-eye fs-lg"></i></a>
                <a href="#" data-table-delete-row class="btn btn-light btn-icon btn-sm rounded-circle"><i
                  class="ti ti-trash fs-lg"></i></a>
              </td>
            </tr>
            <tr>
              <td>Financial Management</td>
              <td>
                <span class="badge bg-primary-subtle text-primary badge-label fs-xxs fw-semibold">Administrator</span>
                <span class="badge bg-info-subtle text-info badge-label fs-xxs fw-semibold">Analyst</span>
              </td>
              <td>24 Jun 2025, <span class="text-muted">5:30 pm</span></td>
              <td>8</td>
              <td class="text-center">
                <a href="#" class="btn btn-light btn-icon btn-sm rounded-circle"><i class="ti ti-eye fs-lg"></i></a>
                <a href="#" data-table-delete-row class="btn btn-light btn-icon btn-sm rounded-circle"><i
                  class="ti ti-trash fs-lg"></i></a>
              </td>
            </tr>
            <tr>
              <td>Reporting</td>
              <td>
                <span class="badge bg-primary-subtle text-primary badge-label fs-xxs fw-semibold">Administrator</span>
                <span class="badge bg-info-subtle text-info badge-label fs-xxs fw-semibold">Analyst</span>
              </td>
              <td>21 Feb 2025, <span class="text-muted">5:20 pm</span></td>
              <td>6</td>
              <td class="text-center">
                <a href="#" class="btn btn-light btn-icon btn-sm rounded-circle"><i class="ti ti-eye fs-lg"></i></a>
                <a href="#" data-table-delete-row class="btn btn-light btn-icon btn-sm rounded-circle"><i
                  class="ti ti-trash fs-lg"></i></a>
              </td>
            </tr>
            <tr>
              <td>Payroll</td>
              <td>
                <span class="badge bg-primary-subtle text-primary badge-label fs-xxs fw-semibold">Administrator</span>
                <span class="badge bg-info-subtle text-info badge-label fs-xxs fw-semibold">Analyst</span>
              </td>
              <td>20 Jun 2025, <span class="text-muted">6:05 pm</span></td>
              <td>4</td>
              <td class="text-center">
                <a href="#" class="btn btn-light btn-icon btn-sm rounded-circle"><i class="ti ti-eye fs-lg"></i></a>
                <a href="#" data-table-delete-row class="btn btn-light btn-icon btn-sm rounded-circle"><i
                  class="ti ti-trash fs-lg"></i></a>
              </td>
            </tr>
            <tr>
              <td>Disputes Management</td>
              <td>
                <span class="badge bg-primary-subtle text-primary badge-label fs-xxs fw-semibold">Administrator</span>
                <span class="badge bg-danger-subtle text-danger badge-label fs-xxs fw-semibold">Developer</span>
                <span class="badge bg-purple-subtle text-purple badge-label fs-xxs fw-semibold">Support</span>
              </td>
              <td>24 Jun 2025, <span class="text-muted">5:20 pm</span></td>
              <td>7</td>
              <td class="text-center">
                <a href="#" class="btn btn-light btn-icon btn-sm rounded-circle"><i class="ti ti-eye fs-lg"></i></a>
                <a href="#" data-table-delete-row class="btn btn-light btn-icon btn-sm rounded-circle"><i
                  class="ti ti-trash fs-lg"></i></a>
              </td>
            </tr>
            <tr>
              <td>Audit Logs</td>
              <td><span class="badge bg-primary-subtle text-primary badge-label fs-xxs fw-semibold">Administrator</span>
              </td>
              <td>23 Jun 2025, <span class="text-muted">4:00 pm</span></td>
              <td>9</td>
              <td class="text-center">
                <a href="#" class="btn btn-light btn-icon btn-sm rounded-circle"><i class="ti ti-eye fs-lg"></i></a>
                <a href="#" data-table-delete-row class="btn btn-light btn-icon btn-sm rounded-circle"><i
                  class="ti ti-trash fs-lg"></i></a>
              </td>
            </tr>
            <tr>
              <td>API Access</td>
              <td>
                <span class="badge bg-primary-subtle text-primary badge-label fs-xxs fw-semibold">Administrator</span>
                <span class="badge bg-warning-subtle text-warning badge-label fs-xxs fw-semibold">Trial</span>
                <span class="badge bg-info-subtle text-info badge-label fs-xxs fw-semibold">DevOps</span>
              </td>
              <td>22 Jun 2025, <span class="text-muted">2:35 pm</span></td>
              <td>3</td>
              <td class="text-center">
                <a href="#" class="btn btn-light btn-icon btn-sm rounded-circle"><i class="ti ti-eye fs-lg"></i></a>
                <a href="#" data-table-delete-row class="btn btn-light btn-icon btn-sm rounded-circle"><i
                  class="ti ti-trash fs-lg"></i></a>
              </td>
            </tr>
            <tr>
              <td>Notification Center</td>
              <td>
                <span class="badge bg-primary-subtle text-primary badge-label fs-xxs fw-semibold">Administrator</span>
                <span class="badge bg-info-subtle text-info badge-label fs-xxs fw-semibold">Support</span>
              </td>
              <td>22 Jun 2025, <span class="text-muted">8:45 am</span></td>
              <td>2</td>
              <td class="text-center">
                <a href="#" class="btn btn-light btn-icon btn-sm rounded-circle"><i class="ti ti-eye fs-lg"></i></a>
                <a href="#" data-table-delete-row class="btn btn-light btn-icon btn-sm rounded-circle"><i
                  class="ti ti-trash fs-lg"></i></a>
              </td>
            </tr>
            <tr>
              <td>Access Logs</td>
              <td>
                <span class="badge bg-primary-subtle text-primary badge-label fs-xxs fw-semibold">Administrator</span>
                <span class="badge bg-purple-subtle text-purple badge-label fs-xxs fw-semibold">Support</span>
              </td>
              <td>19 Jun 2025, <span class="text-muted">6:10 pm</span></td>
              <td>5</td>
              <td class="text-center">
                <a href="#" class="btn btn-light btn-icon btn-sm rounded-circle"><i class="ti ti-eye fs-lg"></i></a>
                <a href="#" data-table-delete-row class="btn btn-light btn-icon btn-sm rounded-circle"><i
                  class="ti ti-trash fs-lg"></i></a>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
        <div class="card-footer border-0">
          <div class="d-flex justify-content-between align-items-center">
            <div data-table-pagination-info="permissions"></div>
            <div data-table-pagination></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- container -->

{% endblock page_content %}

{% block extra_javascript %}

<!-- Custom table -->
<script src="{% static 'js/pages/custom-table.js' %}"></script>

{% endblock extra_javascript %}