<%
  const reportsLocale = typeof lang === 'string' && lang.toLowerCase().startsWith('en') ? 'en' : 'ar';
  const reportsEnglish = reportsLocale === 'en';
  const reportItems = Array.isArray(reports) ? reports : [];
  const totalReports = Number(reportsCount) || 0;
  const copy = reportsEnglish ? {
    eyebrow: 'Administrative traceability',
    title: 'Admin audit log',
    subtitle: 'A read-only record of administrative actions and their request context.',
    readOnly: 'Read-only log',
    total: 'recorded events',
    listTitle: 'Activity stream',
    listDescription: 'The latest administrative events, ordered from newest to oldest.',
    refresh: 'Refresh',
    refreshing: 'Refreshing...',
    refreshed: 'Audit log refreshed',
    refreshFailed: 'Could not refresh the audit log'
  } : {
    eyebrow: 'التتبّع الإداري',
    title: 'سجل تدقيق المشرفين',
    subtitle: 'سجل للقراءة فقط يوثّق الإجراءات الإدارية وسياق الطلب المرتبط بها.',
    readOnly: 'سجل للقراءة فقط',
    total: 'حدثًا موثقًا',
    listTitle: 'تدفق النشاط',
    listDescription: 'أحدث الإجراءات الإدارية مرتبة من الأحدث إلى الأقدم.',
    refresh: 'تحديث',
    refreshing: 'جاري التحديث...',
    refreshed: 'تم تحديث سجل التدقيق',
    refreshFailed: 'تعذر تحديث سجل التدقيق'
  };
%>

<link rel="stylesheet" href="/admin/assets/css/pages/reports.css?v=2.6.4-bc3">

<section
  class="kt-reports-page"
  dir="<%= reportsEnglish ? 'ltr' : 'rtl' %>"
  data-reports-page
  data-reports-refresh-url="<%= filterData.url %>"
  data-reports-refresh-success="<%= copy.refreshed %>"
  data-reports-refresh-failure="<%= copy.refreshFailed %>"
>
  <div class="kt-reports-container">
    <header class="kt-reports-hero">
      <div class="kt-reports-hero__identity">
        <span class="kt-reports-hero__icon" aria-hidden="true">
          <i class="ti ti-search"></i>
        </span>
        <div>
          <small><%= copy.eyebrow %></small>
          <h1><%= copy.title %></h1>
          <p><%= copy.subtitle %></p>
        </div>
      </div>
      <div class="kt-reports-hero__summary">
        <span aria-hidden="true"><i class="ti ti-lock"></i></span>
        <div>
          <small><%= copy.readOnly %></small>
          <strong><%= totalReports %> <%= copy.total %></strong>
        </div>
      </div>
    </header>

    <section class="kt-reports-console" data-reports-console>
      <div class="kt-reports-toolbar">
        <div class="kt-reports-toolbar__context">
          <span aria-hidden="true"><i class="ti ti-activity"></i></span>
          <div>
            <h2><%= copy.listTitle %></h2>
            <p><%= copy.listDescription %></p>
          </div>
        </div>
        <button
          class="kt-reports-refresh"
          type="button"
          data-reports-refresh
          data-default-label="<%= copy.refresh %>"
          data-loading-label="<%= copy.refreshing %>"
        >
          <i class="ti ti-refresh" data-reports-refresh-icon aria-hidden="true"></i>
          <span data-reports-refresh-label><%= copy.refresh %></span>
        </button>
      </div>

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

      <div class="kt-reports-region" data-reports-region aria-live="polite">
        <%- include('./dataTable.ejs', {
          reports: reportItems,
          reportsCount: totalReports,
          paginationHtml,
          lang: reportsLocale,
          i18n
        }) %>
      </div>
    </section>
  </div>
</section>

<script src="/admin/assets/js/pages/reports.js?v=2.6.4-bc2"></script>
