<%
  const supervisorLocale = typeof lang === 'string' && lang.toLowerCase().startsWith('en') ? 'en' : 'ar';
  const supervisorItems = Array.isArray(supervisions) ? supervisions : [];
  const supervisorRoles = Array.isArray(roles) ? roles : [];
  const supervisorCopy = supervisorLocale === 'ar'
    ? {
        eyebrow: 'إدارة الفريق',
        subtitle: 'أدر وصول فريق لوحة التحكم وأدواره من مساحة عمل آمنة وواضحة.',
        insightLabel: 'نطاق الوصول',
        insightValue: 'مرتبط بالأدوار',
        insightHelper: `${supervisorRoles.length} دور متاح`,
        listTitle: 'فريق لوحة التحكم',
        listSubtitle: 'راجع الهوية والدور وحالة الوصول لكل مشرف.',
        refresh: 'تحديث',
        refreshing: 'جاري التحديث...',
        refreshSuccess: 'تم تحديث قائمة المشرفين',
        refreshFailure: 'تعذر تحديث المشرفين. حاول مرة أخرى.',
        actionSuccess: 'تم تنفيذ الإجراء بنجاح',
        actionFailure: 'تعذر تنفيذ الإجراء. راجع الحالة الحالية وحاول مجددًا.',
        bulkDelete: 'حذف المحدد',
        bulkTitle: 'حذف المشرفين المحددين؟',
        bulkDescription: 'سيتم حذف {count} مشرفين مسموح بحذفهم. لا يمكن التراجع عن هذه العملية.',
        bulkConfirm: 'حذف المحدد',
        cancel: 'إلغاء',
        processing: 'جاري التنفيذ...'
      }
    : {
        eyebrow: 'Team management',
        subtitle: 'Manage dashboard team access and roles from one safe, focused workspace.',
        insightLabel: 'Access scope',
        insightValue: 'Role based',
        insightHelper: `${supervisorRoles.length} roles available`,
        listTitle: 'Dashboard team',
        listSubtitle: 'Review identity, role, and access status for every supervisor.',
        refresh: 'Refresh',
        refreshing: 'Refreshing...',
        refreshSuccess: 'Supervisors refreshed',
        refreshFailure: 'Could not refresh supervisors. Please try again.',
        actionSuccess: 'Action completed',
        actionFailure: 'Could not complete this action. Review the current state and try again.',
        bulkDelete: 'Delete selected',
        bulkTitle: 'Delete selected supervisors?',
        bulkDescription: '{count} eligible supervisors will be removed. This cannot be undone.',
        bulkConfirm: 'Delete selected',
        cancel: 'Cancel',
        processing: 'Processing...'
      };
%>

<link rel="stylesheet" href="/admin/assets/css/pages/people-resource.css?v=2.6.5">

<section
  class="kt-people-page kt-supervisors-page"
  dir="<%= supervisorLocale === 'ar' ? 'rtl' : 'ltr' %>"
  data-people-list
  data-people-module="supervisors"
  data-people-refresh-url="/dashboard/supervisions?type=filter"
  data-people-delete-url="/dashboard/supervisions/delete"
  data-people-csrf-token="<%= csrfToken %>"
  data-people-refresh-success="<%= supervisorCopy.refreshSuccess %>"
  data-people-refresh-failure="<%= supervisorCopy.refreshFailure %>"
  data-people-action-success="<%= supervisorCopy.actionSuccess %>"
  data-people-action-failure="<%= supervisorCopy.actionFailure %>"
>
  <span
    data-supervisors-contract
    data-supervisors-csrf-token="<%= csrfToken %>"
    hidden
  ></span>

  <div class="kt-people-container">
    <header class="kt-people-hero">
      <div class="kt-people-hero__identity">
        <span class="kt-people-hero__icon" aria-hidden="true">
          <i class="ti ti-users"></i>
        </span>
        <div>
          <span class="kt-people-hero__eyebrow"><%= supervisorCopy.eyebrow %></span>
          <h1><%= i18n.__('supervisions.supervisions') %></h1>
          <p><%= supervisorCopy.subtitle %></p>
        </div>
      </div>

      <div class="kt-people-hero__insight">
        <span class="kt-people-hero__insight-icon" aria-hidden="true">
          <i class="ti ti-route"></i>
        </span>
        <span class="kt-people-hero__insight-copy">
          <small><%= supervisorCopy.insightLabel %></small>
          <strong><%= supervisorCopy.insightValue %></strong>
          <span><%= supervisorCopy.insightHelper %></span>
        </span>
      </div>
    </header>

    <section class="kt-people-resource" data-people-resource>
      <div class="kt-people-resource__toolbar">
        <div class="kt-people-resource__heading">
          <span class="kt-people-resource__heading-icon" aria-hidden="true">
            <i class="ti ti-id-badge-2"></i>
          </span>
          <div>
            <h2><%= supervisorCopy.listTitle %></h2>
            <p><%= supervisorCopy.listSubtitle %></p>
          </div>
        </div>

        <div class="kt-people-resource__actions">
          <a class="kt-people-btn kt-people-btn--primary" href="/dashboard/supervisions/create">
            <i class="ti ti-user-plus" aria-hidden="true"></i>
            <span><%= i18n.__('common.add') %></span>
          </a>

          <button
            class="kt-people-btn kt-people-btn--danger kt-people-selection-action"
            type="button"
            data-people-bulk-delete
            data-people-url="/dashboard/supervisions/delete"
            data-people-title="<%= supervisorCopy.bulkTitle %>"
            data-people-description="<%= supervisorCopy.bulkDescription %>"
            data-people-confirm="<%= supervisorCopy.bulkConfirm %>"
            hidden
          >
            <i class="ti ti-trash" aria-hidden="true"></i>
            <span><%= supervisorCopy.bulkDelete %></span>
            <span class="kt-people-selection-count" data-people-selection-count>0</span>
          </button>

          <button
            class="kt-people-btn kt-people-btn--secondary kt-people-refresh"
            type="button"
            data-people-refresh
            data-default-label="<%= supervisorCopy.refresh %>"
            data-loading-label="<%= supervisorCopy.refreshing %>"
            aria-controls="supervisors-table-region"
          >
            <span class="kt-people-btn__icon" aria-hidden="true">
              <i class="ti ti-refresh"></i>
            </span>
            <span data-people-button-label><%= supervisorCopy.refresh %></span>
          </button>
        </div>
      </div>

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

      <div
        class="kt-people-table-region"
        id="supervisors-table-region"
        data-people-table-region
        aria-live="polite"
      >
        <%- include('./dataTable.ejs', {
          supervisions: supervisorItems,
          paginationHtml,
          supervisorLocale
        }) %>
      </div>
    </section>
  </div>

  <div
    class="kt-people-modal"
    data-people-modal
    role="dialog"
    aria-modal="true"
    aria-labelledby="supervisor-action-title"
    hidden
  >
    <div class="kt-people-modal__dialog">
      <div class="kt-people-modal__body">
        <span class="kt-people-modal__icon" data-people-modal-icon aria-hidden="true">
          <i class="ti ti-shield-exclamation"></i>
        </span>
        <h2 id="supervisor-action-title" data-people-modal-title></h2>
        <p data-people-modal-description></p>
      </div>
      <div class="kt-people-modal__actions">
        <button class="kt-people-btn kt-people-btn--soft" type="button" data-people-modal-cancel>
          <%= supervisorCopy.cancel %>
        </button>
        <button
          class="kt-people-btn kt-people-btn--danger"
          type="button"
          data-people-modal-confirm
          data-default-label=""
          data-loading-label="<%= supervisorCopy.processing %>"
        >
          <i class="ti ti-check" aria-hidden="true"></i>
          <span data-people-button-label></span>
        </button>
      </div>
    </div>
  </div>
</section>

<script src="/admin/assets/js/pages/supervisors-contract.js"></script>
<script src="/admin/assets/js/pages/people-resource.js?v=2.6.5" defer></script>
