<%
  const safeSupervisors = Array.isArray(supervisions) ? supervisions : [];
  const tableLocale = typeof supervisorLocale === 'string'
    ? supervisorLocale
    : (typeof lang === 'string' && lang.toLowerCase().startsWith('en') ? 'en' : 'ar');
  const tableCopy = tableLocale === 'ar'
    ? {
        caption: 'سجل مشرفي لوحة التحكم',
        identity: 'المشرف',
        contact: 'بيانات التواصل',
        role: 'الدور',
        status: 'الحالة',
        joined: 'تاريخ الانضمام',
        actions: 'التحكم',
        emptyTitle: 'لا يوجد مشرفون في هذه القائمة',
        emptyText: 'أضف مشرفًا جديدًا وحدد دوره ليظهر ضمن فريق لوحة التحكم.',
        total: 'إجمالي النتائج المعروضة',
        helper: 'حسابات الفريق في الصفحة الحالية'
      }
    : {
        caption: 'Dashboard supervisors register',
        identity: 'Supervisor',
        contact: 'Contact',
        role: 'Role',
        status: 'Status',
        joined: 'Joined',
        actions: 'Actions',
        emptyTitle: 'No supervisors in this list',
        emptyText: 'Add a supervisor and assign a role to build your dashboard team.',
        total: 'Results shown',
        helper: 'Team accounts on the current page'
      };
%>

<div class="kt-people-table-fragment" data-people-table-fragment>
  <% if (!safeSupervisors.length) { %>
    <div class="kt-people-empty" data-people-empty>
      <span class="kt-people-empty__icon" aria-hidden="true">
        <i class="ti ti-users-minus"></i>
      </span>
      <h3><%= tableCopy.emptyTitle %></h3>
      <p><%= tableCopy.emptyText %></p>
      <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>
    </div>
  <% } else { %>
    <div class="kt-people-table-scroll">
      <table class="kt-people-table">
        <caption class="kt-people-visually-hidden"><%= tableCopy.caption %></caption>
        <colgroup>
          <col style="width: 3rem">
          <col style="width: 14rem">
          <col style="width: 12rem">
          <col style="width: 8.5rem">
          <col style="width: 7.5rem">
          <col style="width: 7rem">
          <col style="width: 9.5rem">
        </colgroup>
        <thead>
          <tr>
            <th>
              <input
                class="kt-people-checkbox"
                type="checkbox"
                data-people-select-all
                aria-label="<%= i18n.__('common.checkAll') %>"
              >
            </th>
            <th><%= tableCopy.identity %></th>
            <th><%= tableCopy.contact %></th>
            <th><%= tableCopy.role %></th>
            <th><%= tableCopy.status %></th>
            <th><%= tableCopy.joined %></th>
            <th><%= tableCopy.actions %></th>
          </tr>
        </thead>
        <tbody>
          <%- include('./tds.ejs', {
            supervisions: safeSupervisors,
            supervisorLocale: tableLocale,
            supervisorTableCopy: tableCopy
          }) %>
        </tbody>
      </table>
    </div>

    <% if (typeof paginationHtml !== 'undefined' && paginationHtml) { %>
      <nav class="kt-people-pagination" aria-label="<%= tableCopy.caption %>">
        <%- paginationHtml %>
      </nav>
    <% } %>
  <% } %>

  <footer class="kt-people-table-footer">
    <span><%= tableCopy.total %>: <strong><%= safeSupervisors.length %></strong></span>
    <span><%= tableCopy.helper %></span>
  </footer>
</div>
