<%
  const clientsLocale = typeof lang === 'string' && lang.toLowerCase().startsWith('en') ? 'en' : 'ar';
  const clientItems = Array.isArray(clients) ? clients : [];
  const clientCounts = Array.isArray(counts) ? counts : [];
  const blockedCount = Number(clientCounts[0] && clientCounts[0].value) || 0;
  const unblockedCount = Number(clientCounts[1] && clientCounts[1].value) || 0;
  const activeCount = Number(clientCounts[2] && clientCounts[2].value) || 0;
  const inactiveCount = Number(clientCounts[3] && clientCounts[3].value) || 0;
  const allCount = blockedCount + unblockedCount;
  const clientsCopy = clientsLocale === 'ar'
    ? {
        eyebrow: 'إدارة العملاء',
        subtitle: 'راجع هوية المستخدمين وحالة الحساب والتفاعل من مساحة تشغيل واحدة.',
        insightLabel: 'نطاق العملاء',
        insightValue: 'هوية ونشاط',
        insightHelper: `${allCount} حساب حالي`,
        all: 'جميع المستخدمين',
        allHelper: 'كل الحسابات',
        active: 'المستخدمون النشطون',
        activeHelper: 'وصول متاح',
        inactive: 'غير النشطين',
        inactiveHelper: 'بانتظار التفعيل',
        blocked: 'المحظورون',
        blockedHelper: 'وصول موقوف',
        currentScope: 'الحالي',
        listTitle: 'سجل المستخدمين',
        listSubtitle: 'هوية العميل، حالة الوصول، والنشاط في سجل تشغيلي واحد.',
        add: 'إضافة مستخدم',
        refresh: 'تحديث',
        refreshing: 'جاري التحديث...',
        refreshSuccess: 'تم تحديث قائمة المستخدمين',
        refreshFailure: 'تعذر تحديث المستخدمين. حاول مرة أخرى.',
        actionSuccess: 'تم تنفيذ الإجراء بنجاح',
        actionFailure: 'تعذر تنفيذ الإجراء. راجع الحالة الحالية وحاول مجددًا.',
        exportFailure: 'تعذر تصدير المستخدمين. حاول مرة أخرى.',
        tableErrorTitle: 'تعذر تحميل سجل المستخدمين',
        tableErrorText: 'احتفظنا بالبيانات الحالية. يمكنك إعادة المحاولة دون مغادرة الصفحة.',
        retry: 'إعادة المحاولة',
        permissionTitle: 'لا تملك صلاحية عرض المستخدمين',
        permissionText: 'تواصل مع مدير النظام إذا كنت تحتاج إلى الوصول لهذا السجل.',
        noResultsTitle: 'لا توجد نتائج مطابقة',
        noResultsText: 'جرّب نطاقًا آخر أو عدّل معايير البحث.',
        pdf: 'تصدير PDF',
        excel: 'تصدير Excel',
        excelAll: 'تصدير الكل Excel',
        exporting: 'جاري التصدير...',
        bulkDelete: 'حذف المحدد',
        bulkTitle: 'حذف المستخدمين المحددين؟',
        bulkDescription: 'سيتم حذف {count} مستخدمين من السجل. لا يمكن التراجع عن هذه العملية.',
        bulkConfirm: 'حذف المحدد',
        cancel: 'إلغاء',
        processing: 'جاري التنفيذ...'
      }
    : {
        eyebrow: 'Customer management',
        subtitle: 'Review customer identity, account state, and activity from one operational workspace.',
        insightLabel: 'Customer scope',
        insightValue: 'Identity and activity',
        insightHelper: `${allCount} current accounts`,
        all: 'All users',
        allHelper: 'All accounts',
        active: 'Active users',
        activeHelper: 'Access available',
        inactive: 'Inactive users',
        inactiveHelper: 'Awaiting activation',
        blocked: 'Blocked users',
        blockedHelper: 'Access suspended',
        currentScope: 'Current',
        listTitle: 'Customer register',
        listSubtitle: 'Customer identity, access state, and activity in one operations register.',
        add: 'Add user',
        refresh: 'Refresh',
        refreshing: 'Refreshing...',
        refreshSuccess: 'Users refreshed',
        refreshFailure: 'Could not refresh users. Please try again.',
        actionSuccess: 'Action completed',
        actionFailure: 'Could not complete this action. Review the current state and try again.',
        exportFailure: 'Could not export users. Please try again.',
        tableErrorTitle: 'Could not load the user register',
        tableErrorText: 'The current data remains available. Retry without leaving this page.',
        retry: 'Retry',
        permissionTitle: 'You do not have permission to view users',
        permissionText: 'Contact an administrator if you need access to this register.',
        noResultsTitle: 'No matching results',
        noResultsText: 'Choose another scope or update the search criteria.',
        pdf: 'Export PDF',
        excel: 'Export Excel',
        excelAll: 'Export all Excel',
        exporting: 'Exporting...',
        bulkDelete: 'Delete selected',
        bulkTitle: 'Delete selected users?',
        bulkDescription: '{count} users will be removed from the register. This cannot be undone.',
        bulkConfirm: 'Delete selected',
        cancel: 'Cancel',
        processing: 'Processing...'
      };
  const clientFilters = [
    {
      key: 'all',
      tone: 'all',
      label: clientsCopy.all,
      helper: clientsCopy.allHelper,
      value: allCount,
      icon: 'ti-users'
    },
    {
      key: 'active',
      tone: 'active',
      label: clientsCopy.active,
      helper: clientsCopy.activeHelper,
      value: activeCount,
      icon: 'ti-user-check'
    },
    {
      key: 'notActive',
      tone: 'inactive',
      label: clientsCopy.inactive,
      helper: clientsCopy.inactiveHelper,
      value: inactiveCount,
      icon: 'ti-user-pause'
    },
    {
      key: 'block',
      tone: 'blocked',
      label: clientsCopy.blocked,
      helper: clientsCopy.blockedHelper,
      value: blockedCount,
      icon: 'ti-user-x'
    }
  ];
%>

<link rel="stylesheet" href="/admin/assets/css/pages/people-resource.css?v=2.6.15">
<link rel="stylesheet" href="/admin/assets/css/pages/clients-console.css?v=2.2.9">

<section
  class="kt-people-page kt-clients-page"
  dir="<%= clientsLocale === 'ar' ? 'rtl' : 'ltr' %>"
  data-people-list
  data-people-module="clients"
  data-people-refresh-url="/dashboard/clients/filter?statusType=<%= type %>"
  data-client-status-url="/dashboard/clients/filter"
  data-client-current-status="<%= type %>"
  data-people-delete-url="/dashboard/clients/delete"
  data-people-csrf-token="<%= csrfToken %>"
  data-people-refresh-success="<%= clientsCopy.refreshSuccess %>"
  data-people-refresh-failure="<%= clientsCopy.refreshFailure %>"
  data-people-action-success="<%= clientsCopy.actionSuccess %>"
  data-people-action-failure="<%= clientsCopy.actionFailure %>"
  data-people-export-failure="<%= clientsCopy.exportFailure %>"
  data-people-table-error-title="<%= clientsCopy.tableErrorTitle %>"
  data-people-table-error-text="<%= clientsCopy.tableErrorText %>"
>
  <div
    data-clients-contract
    data-clients-csrf-token="<%= csrfToken %>"
    hidden
  ></div>

  <div class="kt-people-container">
    <header class="kt-people-hero kt-clients-hero">
      <div class="kt-people-hero__identity">
        <span class="kt-people-hero__icon" aria-hidden="true">
          <i class="ti ti-user-heart"></i>
        </span>
        <div>
          <span class="kt-people-hero__eyebrow"><%= clientsCopy.eyebrow %></span>
          <h1><%= clientsLocale === 'ar' ? 'المستخدمين' : 'Users' %></h1>
          <p><%= clientsCopy.subtitle %></p>
        </div>
      </div>

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

    <nav class="kt-people-summary kt-clients-status-switcher" aria-label="<%= clientsCopy.insightLabel %>">
      <% clientFilters.forEach((filter) => { %>
        <a
          class="kt-people-summary__item kt-clients-filter kt-clients-status-card kt-clients-filter--<%= filter.tone %> <%= type === filter.key ? 'is-active' : '' %>"
          href="/dashboard/clients/<%= filter.key %>"
          data-client-status-filter="<%= filter.key %>"
          data-client-status-card
          data-client-status-href="/dashboard/clients/<%= filter.key %>"
          <%= type === filter.key ? 'aria-current="page"' : '' %>
        >
          <span class="kt-clients-status-card__main">
            <span class="kt-clients-status-card__icon" aria-hidden="true">
              <i class="ti <%= filter.icon %>"></i>
            </span>
            <span class="kt-clients-status-card__copy">
              <strong class="kt-clients-status-card__title"><%= filter.label %></strong>
            </span>
            <span class="kt-clients-status-card__metric">
              <strong class="kt-clients-status-card__value"><%= filter.value %></strong>
            </span>
          </span>

          <span class="kt-clients-status-card__meta">
            <small class="kt-clients-status-card__helper" data-client-status-helper><%= filter.helper %></small>
            <span
              class="kt-clients-status-card__current"
              data-client-status-current
              <%= type === filter.key ? '' : 'hidden' %>
            >
              <span aria-hidden="true"></span>
              <%= clientsCopy.currentScope %>
            </span>
            <span
              class="kt-clients-status-card__arrow"
              data-client-status-arrow
              aria-hidden="true"
              <%= type === filter.key ? 'hidden' : '' %>
            >
              <i class="ti <%= clientsLocale === 'ar' ? 'ti-arrow-left' : 'ti-arrow-right' %>"></i>
            </span>
            <span
              class="kt-clients-status-card__loader"
              data-client-status-loader
              aria-hidden="true"
              hidden
            >
              <i class="ti ti-loader-2"></i>
            </span>
          </span>
        </a>
      <% }) %>
    </nav>

    <section class="kt-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-address-book"></i>
          </span>
          <div>
            <h2><%= clientsCopy.listTitle %></h2>
            <p><%= clientsCopy.listSubtitle %></p>
          </div>
        </div>

        <div class="kt-people-resource__actions kt-clients-toolbar">
          <div class="kt-clients-toolbar__primary">
            <a class="kt-people-btn kt-people-btn--primary" href="/dashboard/clients/create">
              <i class="ti ti-user-plus" aria-hidden="true"></i>
              <span><%= clientsCopy.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/clients/delete"
              data-people-title="<%= clientsCopy.bulkTitle %>"
              data-people-description="<%= clientsCopy.bulkDescription %>"
              data-people-confirm="<%= clientsCopy.bulkConfirm %>"
              hidden
            >
              <i class="ti ti-trash" aria-hidden="true"></i>
              <span><%= clientsCopy.bulkDelete %></span>
              <span class="kt-people-selection-count" data-people-selection-count>0</span>
            </button>
          </div>

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

            <%- include('./partials/exportMenu.ejs', {
              clientsCopy,
              clientsLocale,
              exportData,
              title
            }) %>
          </div>
        </div>
      </div>

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

      <div class="kt-client-table-alert" role="alert" data-people-table-error hidden>
        <span class="kt-client-table-alert__icon" aria-hidden="true"><i class="ti ti-alert-circle"></i></span>
        <span>
          <strong data-people-table-error-title><%= clientsCopy.tableErrorTitle %></strong>
          <small data-people-table-error-text><%= clientsCopy.tableErrorText %></small>
        </span>
        <button class="kt-people-btn kt-people-btn--soft" type="button" data-people-refresh>
          <i class="ti ti-refresh" aria-hidden="true"></i>
          <span><%= clientsCopy.retry %></span>
        </button>
      </div>

      <div class="kt-client-table-stage">
        <div
          class="kt-people-table-region"
          id="clients-table-region"
          data-people-table-region
          aria-live="polite"
        >
          <%- include('./dataTable.ejs', {
            clients: clientItems,
            paginationHtml,
            clientsLocale
          }) %>
        </div>
      </div>

      <template data-people-state-template="no-results">
        <div class="kt-people-empty">
          <span class="kt-people-empty__icon" aria-hidden="true"><i class="ti ti-search-off"></i></span>
          <h3><%= clientsCopy.noResultsTitle %></h3>
          <p><%= clientsCopy.noResultsText %></p>
        </div>
      </template>

      <template data-people-state-template="permission-denied">
        <div class="kt-people-empty kt-people-empty--permission">
          <span class="kt-people-empty__icon" aria-hidden="true"><i class="ti ti-shield-lock"></i></span>
          <h3><%= clientsCopy.permissionTitle %></h3>
          <p><%= clientsCopy.permissionText %></p>
        </div>
      </template>
    </section>
  </div>

  <div
    class="kt-people-modal"
    data-people-modal
    role="dialog"
    aria-modal="true"
    aria-labelledby="client-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-user-exclamation"></i>
        </span>
        <h2 id="client-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>
          <%= clientsCopy.cancel %>
        </button>
        <button
          class="kt-people-btn kt-people-btn--danger"
          type="button"
          data-people-modal-confirm
          data-default-label=""
          data-loading-label="<%= clientsCopy.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/clients-contract.js"></script>
<script src="/admin/assets/js/pages/people-resource.js?v=2.6.16" defer></script>