<%
  const roleItems = Array.isArray(roles) ? roles : [];
  const roleCatalogue = typeof permissions !== 'undefined' && Array.isArray(permissions)
    ? permissions
    : [];
  const tableLocale = typeof lang === 'string' && lang.toLowerCase().startsWith('en') ? 'en' : 'ar';
  const tableEnglish = tableLocale === 'en';
  const tableCopy = tableEnglish ? {
    emptyTitle: 'No roles yet',
    emptyDescription: 'Create the first access role to organize administrative permissions.',
    add: 'Create role',
    role: 'Role',
    coverage: 'Coverage',
    assignments: 'Assignments',
    state: 'State',
    actions: 'Actions',
    total: 'Total roles',
    helper: 'Current access roles'
  } : {
    emptyTitle: 'لا توجد أدوار حتى الآن',
    emptyDescription: 'أنشئ أول دور وصول لتنظيم صلاحيات المشرفين.',
    add: 'إضافة دور',
    role: 'الدور',
    coverage: 'نطاق الصلاحيات',
    assignments: 'الارتباطات',
    state: 'الحالة',
    actions: 'التحكم',
    total: 'إجمالي الأدوار',
    helper: 'أدوار الوصول الحالية'
  };
%>

<div class="kt-permissions-fragment" data-permissions-fragment>
  <% if (!roleItems.length) { %>
    <div class="kt-permissions-empty" data-permissions-empty>
      <span aria-hidden="true"><i class="ti ti-shield-off"></i></span>
      <div>
        <h3><%= tableCopy.emptyTitle %></h3>
        <p><%= tableCopy.emptyDescription %></p>
      </div>
      <a class="kt-permissions-button kt-permissions-button--primary" href="/dashboard/permissions/create">
        <i class="ti ti-plus" aria-hidden="true"></i>
        <%= tableCopy.add %>
      </a>
    </div>
  <% } else { %>
    <div class="kt-permissions-table-scroll">
      <table class="kt-permissions-table">
        <caption class="kt-permissions-visually-hidden"><%= tableCopy.helper %></caption>
        <colgroup>
          <col class="kt-permissions-col--select">
          <col class="kt-permissions-col--role">
          <col class="kt-permissions-col--coverage">
          <col class="kt-permissions-col--assignments">
          <col class="kt-permissions-col--state">
          <col class="kt-permissions-col--actions">
        </colgroup>
        <thead>
          <tr>
            <th>
              <input class="kt-permissions-checkbox" type="checkbox" data-permissions-select-all aria-label="<%= i18n.__('common.checkAll') %>">
            </th>
            <th><%= tableCopy.role %></th>
            <th><%= tableCopy.coverage %></th>
            <th><%= tableCopy.assignments %></th>
            <th><%= tableCopy.state %></th>
            <th><%= tableCopy.actions %></th>
          </tr>
        </thead>
        <tbody>
          <%- include('./tds.ejs', { roles: roleItems, user, lang: tableLocale, i18n }) %>
        </tbody>
      </table>
    </div>
  <% } %>

  <div data-permissions-detail-templates hidden>
    <% roleItems.forEach((role) => { %>
      <template data-permissions-role-detail-template="<%= role.roleId %>">
        <%- include('./partials/roleDetail.ejs', {
          role,
          permissions: roleCatalogue,
          lang: tableLocale,
          i18n
        }) %>
      </template>
    <% }) %>
  </div>

  <footer class="kt-permissions-footer">
    <span>
      <small><%= tableCopy.total %></small>
      <strong data-permissions-total><%= roleItems.length %></strong>
    </span>
    <p><%= tableCopy.helper %></p>
  </footer>
</div>
