<%
  const permissionsLocale = typeof lang === 'string' && lang.toLowerCase().startsWith('en') ? 'en' : 'ar';
  const permissionsItems = Array.isArray(roles) ? roles : [];
  const isEnglish = permissionsLocale === 'en';
  const copy = isEnglish ? {
    eyebrow: 'Access governance',
    title: 'Roles & permissions',
    subtitle: 'Control administrative access with explicit, reviewable permission sets.',
    scope: 'Permission catalogue',
    scopeValue: 'Route-based',
    listTitle: 'Access roles',
    listDescription: 'Review role coverage, assignments, and protected access.',
    refresh: 'Refresh',
    refreshing: 'Refreshing...',
    refreshed: 'Roles refreshed',
    refreshFailed: 'Could not refresh permissions. Try again.',
    add: 'Create role',
    selection: 'Selection active',
    bulkDelete: 'Delete selected',
    deleteTitle: 'Delete selected roles?',
    deleteDescription: 'The selected roles will be removed. Assigned and protected roles cannot be deleted.',
    deleteConfirm: 'Delete roles',
    deleting: 'Deleting...',
    cancel: 'Cancel',
    deleteSuccess: 'Roles deleted successfully',
    selectRequired: 'Select at least one deletable role',
    viewTitle: 'Role overview',
    viewDescription: 'A safe, read-only summary of the current access role.',
    roleName: 'Role name',
    roleDescription: 'Description',
    permissionCount: 'Permissions',
    assignmentCount: 'Assigned admins',
    roleState: 'Protection state',
    protectedState: 'Protected system role',
    managedState: 'Managed role',
    emptyDescription: 'No description has been added.',
    close: 'Close',
    editRole: 'Edit role'
  } : {
    eyebrow: 'حوكمة الوصول',
    title: 'الأدوار والصلاحيات',
    subtitle: 'تحكّم في وصول المشرفين عبر مجموعات صلاحيات واضحة وقابلة للمراجعة.',
    scope: 'كتالوج الصلاحيات',
    scopeValue: 'مرتبط بالمسارات',
    listTitle: 'أدوار الوصول',
    listDescription: 'راجع نطاق كل دور، المشرفين المرتبطين به، وحالة الحماية.',
    refresh: 'تحديث',
    refreshing: 'جاري التحديث...',
    refreshed: 'تم تحديث الأدوار',
    refreshFailed: 'تعذر تحديث الصلاحيات. حاول مرة أخرى.',
    add: 'إضافة دور',
    selection: 'وضع التحديد نشط',
    bulkDelete: 'حذف المحدد',
    deleteTitle: 'حذف الأدوار المحددة؟',
    deleteDescription: 'سيتم حذف الأدوار المحددة. لا يمكن حذف الأدوار المحمية أو المرتبطة بمشرفين.',
    deleteConfirm: 'حذف الأدوار',
    deleting: 'جاري الحذف...',
    cancel: 'إلغاء',
    deleteSuccess: 'تم حذف الأدوار بنجاح',
    selectRequired: 'حدد دورًا واحدًا قابلًا للحذف على الأقل',
    viewTitle: 'ملخص الدور',
    viewDescription: 'عرض آمن للقراءة فقط لبيانات دور الوصول الحالي.',
    roleName: 'اسم الدور',
    roleDescription: 'الوصف',
    permissionCount: 'الصلاحيات',
    assignmentCount: 'المشرفون المرتبطون',
    roleState: 'حالة الحماية',
    protectedState: 'دور نظام محمي',
    managedState: 'دور قابل للإدارة',
    emptyDescription: 'لم تتم إضافة وصف لهذا الدور.',
    close: 'إغلاق',
    editRole: 'تعديل الدور'
  };
%>

<link rel="stylesheet" href="/admin/assets/css/pages/permissions.css?v=2.7.1-rowfix">

<section
  class="kt-permissions-page"
  dir="<%= isEnglish ? 'ltr' : 'rtl' %>"
  data-permissions-page
  data-permissions-refresh-url="<%= filterData.url %>"
  data-permissions-delete-url="/dashboard/permissions/delete"
  data-permissions-csrf-token="<%= csrfToken %>"
  data-permissions-refresh-success="<%= copy.refreshed %>"
  data-permissions-refresh-failure="<%= copy.refreshFailed %>"
  data-permissions-delete-success="<%= copy.deleteSuccess %>"
  data-permissions-select-required="<%= copy.selectRequired %>"
>
  <div class="kt-permissions-container">
    <header class="kt-permissions-hero">
      <div class="kt-permissions-hero__identity">
        <span class="kt-permissions-hero__icon" aria-hidden="true">
          <i class="ti ti-shield-lock"></i>
        </span>
        <div>
          <span class="kt-permissions-hero__eyebrow"><%= copy.eyebrow %></span>
          <h1><%= copy.title %></h1>
          <p><%= copy.subtitle %></p>
        </div>
      </div>
      <span class="kt-permissions-hero__badge">
        <i class="ti ti-route" aria-hidden="true"></i>
        <span><%= copy.scope %></span>
        <strong><%= copy.scopeValue %></strong>
      </span>
    </header>

    <section class="kt-permissions-resource" data-permissions-resource>
      <div class="kt-permissions-toolbar">
        <div class="kt-permissions-toolbar__context">
          <span class="kt-permissions-toolbar__icon" aria-hidden="true">
            <i class="ti ti-users"></i>
          </span>
          <div>
            <h2><%= copy.listTitle %></h2>
            <p><%= copy.listDescription %></p>
          </div>
          <span class="kt-permissions-selection-label" data-permissions-selection-label hidden>
            <i class="ti ti-checks" aria-hidden="true"></i>
            <%= copy.selection %>
          </span>
        </div>
        <div class="kt-permissions-toolbar__actions">
          <a class="kt-permissions-button kt-permissions-button--primary" href="/dashboard/permissions/create">
            <i class="ti ti-plus" aria-hidden="true"></i>
            <span><%= copy.add %></span>
          </a>
          <div class="kt-permissions-bulk-slot">
            <button
              class="kt-permissions-button kt-permissions-button--danger"
              type="button"
              data-permissions-bulk-delete
              hidden
            >
              <i class="ti ti-trash" aria-hidden="true"></i>
              <span><%= copy.bulkDelete %></span>
              <strong data-permissions-selection-count>0</strong>
            </button>
          </div>
          <button
            class="kt-permissions-button kt-permissions-button--secondary kt-permissions-refresh"
            type="button"
            data-permissions-refresh
            data-default-label="<%= copy.refresh %>"
            data-loading-label="<%= copy.refreshing %>"
          >
            <i class="ti ti-refresh" data-permissions-refresh-icon aria-hidden="true"></i>
            <span data-permissions-refresh-label><%= copy.refresh %></span>
          </button>
        </div>
      </div>

      <div class="kt-permissions-progress" data-permissions-progress hidden aria-hidden="true">
        <span></span>
      </div>

      <div
        class="kt-permissions-table-region"
        data-permissions-table-region
        aria-live="polite"
      >
        <%- include('./dataTable.ejs', {
          roles: permissionsItems,
          permissions,
          user,
          lang: permissionsLocale,
          i18n
        }) %>
      </div>
    </section>
  </div>

  <div
    class="kt-permissions-view-modal"
    data-permissions-view-modal
    role="dialog"
    aria-modal="true"
    aria-labelledby="permissions-view-title"
    aria-describedby="permissions-view-description"
    hidden
  >
    <div class="kt-permissions-view-modal__dialog">
      <header class="kt-permissions-view-modal__header">
        <span class="kt-permissions-view-modal__icon" aria-hidden="true">
          <i class="ti ti-eye"></i>
        </span>
        <div>
          <h2 id="permissions-view-title"><%= copy.viewTitle %></h2>
          <p id="permissions-view-description"><%= copy.viewDescription %></p>
        </div>
        <button
          class="kt-permissions-view-modal__close"
          type="button"
          data-permissions-view-close
          aria-label="<%= copy.close %>"
        >
          <i class="ti ti-x" aria-hidden="true"></i>
        </button>
      </header>
      <div class="kt-permissions-view-modal__body" data-permissions-view-content></div>
      <footer>
        <button
          class="kt-permissions-button kt-permissions-button--secondary"
          type="button"
          data-permissions-view-close
        ><%= copy.close %></button>
        <a
          class="kt-permissions-button kt-permissions-button--primary"
          href="/dashboard/permissions"
          data-permissions-view-edit
          hidden
        >
          <i class="ti ti-edit" aria-hidden="true"></i>
          <%= copy.editRole %>
        </a>
      </footer>
    </div>
  </div>

  <div
    class="kt-permissions-delete-modal"
    data-permissions-delete-modal
    role="alertdialog"
    aria-modal="true"
    aria-labelledby="permissions-delete-title"
    aria-describedby="permissions-delete-description"
    hidden
  >
    <div class="kt-permissions-delete-modal__dialog">
      <span class="kt-permissions-delete-modal__icon" aria-hidden="true">
        <i class="ti ti-trash"></i>
      </span>
      <div>
        <h2 id="permissions-delete-title"><%= copy.deleteTitle %></h2>
        <p id="permissions-delete-description"><%= copy.deleteDescription %></p>
      </div>
      <div class="kt-permissions-delete-modal__actions">
        <button class="kt-permissions-button kt-permissions-button--secondary" type="button" data-permissions-delete-cancel>
          <%= copy.cancel %>
        </button>
        <button
          class="kt-permissions-button kt-permissions-button--danger"
          type="button"
          data-permissions-delete-confirm
          data-default-label="<%= copy.deleteConfirm %>"
          data-loading-label="<%= copy.deleting %>"
        >
          <i class="ti ti-trash" data-permissions-delete-icon aria-hidden="true"></i>
          <i class="ti ti-loader-2 kt-permissions-spinner" data-permissions-delete-spinner aria-hidden="true" hidden></i>
          <span data-permissions-delete-label><%= copy.deleteConfirm %></span>
        </button>
      </div>
    </div>
  </div>
</section>

<script src="/admin/assets/js/pages/permissions.js?v=2.7.1-rowfix"></script>
