<%
  const reasonsPageLocale = typeof lang === 'string' && lang.toLowerCase().startsWith('en') ? 'en' : 'ar';
  const reasonsPageItems = Array.isArray(reasons) ? reasons : [];
  const reasonsRefreshLoadingLabel = reasonsPageLocale === 'ar' ? 'جاري التحديث...' : 'Refreshing...';
  const reasonsRefreshSuccessLabel = reasonsPageLocale === 'ar' ? 'تم تحديث القائمة' : 'List refreshed';
  const reasonsRefreshFailureLabel = reasonsPageLocale === 'ar' ? 'تعذر تحديث القائمة' : 'Could not refresh list';
  const reasonsHeaderEyebrow = reasonsPageLocale === 'ar' ? 'إدارة المحتوى' : 'Content management';
  const reasonsHeaderSubtitle = reasonsPageLocale === 'ar'
    ? 'نظّم قائمة الأسباب بصياغة واضحة ومتسقة باللغتين.'
    : 'Keep every reason clear and consistent in both languages.';
  const reasonsScopeLabel = reasonsPageLocale === 'ar' ? 'نطاق المورد' : 'Resource scope';
  const reasonsScopeValue = reasonsPageLocale === 'ar' ? 'ثنائي اللغة' : 'Bilingual';
  const reasonsScopeHelper = reasonsPageLocale === 'ar' ? 'عربي / إنجليزي' : 'Arabic / English';
  const reasonsListTitle = reasonsPageLocale === 'ar' ? 'قائمة الأسباب' : 'Reasons list';
  const reasonsListDescription = reasonsPageLocale === 'ar'
    ? 'راجع الصياغة والحالة من مساحة عمل واحدة.'
    : 'Review wording and status from one focused workspace.';
  const reasonsSelectionHint = reasonsPageLocale === 'ar' ? 'تحديد متعدد' : 'Multi-select';
  const reasonsBulkContext = reasonsPageLocale === 'ar' ? 'وضع التحديد نشط' : 'Selection mode is active';
  const reasonsBulkDeleteLabel = reasonsPageLocale === 'ar' ? 'حذف المحدد' : 'Delete selected';
  const reasonsDeleteLoadingLabel = reasonsPageLocale === 'ar' ? 'جاري الحذف...' : 'Deleting...';
  const reasonsSingleDeleteTitle = reasonsPageLocale === 'ar' ? 'حذف السبب؟' : 'Delete this reason?';
  const reasonsSingleDeleteDescription = reasonsPageLocale === 'ar'
    ? 'سيتم حذف هذا السبب من القائمة. لا يمكن التراجع عن هذه العملية.'
    : 'This reason will be removed from the list. This action cannot be undone.';
  const reasonsSingleDeleteConfirm = reasonsPageLocale === 'ar' ? 'حذف' : 'Delete';
  const reasonsBulkDeleteTitle = reasonsPageLocale === 'ar'
    ? 'حذف الأسباب المحددة؟'
    : 'Delete selected reasons?';
  const reasonsBulkDeleteDescription = reasonsPageLocale === 'ar'
    ? 'سيتم حذف {count} أسباب من القائمة. لا يمكن التراجع عن هذه العملية.'
    : '{count} reasons will be removed from the list. This action cannot be undone.';
  const reasonsLongTextTitle = reasonsPageLocale === 'ar' ? 'النص الكامل' : 'Full content';
%>

<link rel="stylesheet" href="/admin/assets/css/pages/reasons.css?v=2.5.2.4">

<section
  class="reasons-page kt-reasons-page"
  dir="<%= reasonsPageLocale === 'ar' ? 'rtl' : 'ltr' %>"
  data-reasons-page
  data-reasons-refresh-url="<%= filterData.url %>"
  data-reasons-delete-url="/dashboard/reasons/delete"
  data-reasons-csrf-token="<%= csrfToken %>"
  data-reasons-delete-success="<%= i18n.__('common.deletionSuccessMessage') %>"
  data-reasons-select-required="<%= i18n.__('common.selectAtLeastOne') %>"
  data-reasons-refresh-success="<%= reasonsRefreshSuccessLabel %>"
  data-reasons-refresh-failure="<%= reasonsRefreshFailureLabel %>"
>
  <div class="reasons-container kt-reasons-container">
    <header class="reasons-hero-card kt-reasons-hero">
      <div class="kt-reasons-hero__identity">
        <span class="kt-reasons-hero__icon" aria-hidden="true">
          <i class="ti ti-message-report"></i>
        </span>
        <div class="kt-reasons-hero__copy">
          <span class="kt-reasons-hero__eyebrow"><%= reasonsHeaderEyebrow %></span>
          <h1 class="kt-reasons-hero__title"><%= i18n.__('reasons.reasons') %></h1>
          <p class="kt-reasons-hero__description"><%= reasonsHeaderSubtitle %></p>
        </div>
      </div>

      <div class="kt-reasons-hero__scope" aria-label="<%= reasonsScopeLabel %>">
        <span class="kt-reasons-hero__scope-icon" aria-hidden="true">
          <i class="ti ti-language"></i>
        </span>
        <span class="kt-reasons-hero__scope-copy">
          <small><%= reasonsScopeLabel %></small>
          <strong><%= reasonsScopeValue %></strong>
          <span><%= reasonsScopeHelper %></span>
        </span>
      </div>
    </header>

    <section class="reasons-resource-card kt-reasons-resource" data-reasons-resource>
      <div class="kt-reasons-resource__toolbar" data-reasons-toolbar>
        <div class="kt-reasons-resource__context">
          <div class="kt-reasons-resource__summary" data-reasons-default-context>
            <span class="kt-reasons-resource__summary-icon" aria-hidden="true">
              <i class="ti ti-list-details"></i>
            </span>
            <div>
              <h2><%= reasonsListTitle %></h2>
              <p><%= reasonsListDescription %></p>
            </div>
          </div>

          <div class="kt-reasons-selection-context" data-reasons-selection-context aria-live="polite">
            <span class="kt-reasons-selection-context__icon" aria-hidden="true">
              <i class="ti ti-checks"></i>
            </span>
            <span class="kt-reasons-selection-context__copy"><%= reasonsBulkContext %></span>
          </div>
        </div>

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

          <div class="kt-reasons-action-slot">
            <span class="kt-reasons-selection-hint" data-reasons-default-action>
              <i class="ti ti-checkbox" aria-hidden="true"></i>
              <span><%= reasonsSelectionHint %></span>
            </span>

            <button
              class="kt-reasons-bulk-delete"
              type="button"
              data-reasons-bulk-delete
              hidden
            >
              <i class="ti ti-trash" aria-hidden="true"></i>
              <span><%= reasonsBulkDeleteLabel %></span>
              <span class="kt-reasons-selection-count" data-reasons-selection-count aria-hidden="true">0</span>
            </button>
          </div>

          <button
            class="kt-btn kt-btn--secondary kt-reasons-action-button kt-reasons-refresh"
            type="button"
            data-reasons-refresh
            data-reasons-default-label="<%= i18n.__('common.refresh') %>"
            data-reasons-loading-label="<%= reasonsRefreshLoadingLabel %>"
            aria-controls="reasons-table-region"
          >
            <span class="kt-reasons-action-button__icon" aria-hidden="true">
              <i class="ti ti-refresh" data-reasons-refresh-icon></i>
            </span>
            <span data-reasons-refresh-label><%= i18n.__('common.refresh') %></span>
          </button>
        </div>
      </div>

      <div
        class="kt-reasons-refresh-progress"
        data-reasons-refresh-progress
        aria-hidden="true"
        hidden
      >
        <span class="kt-reasons-refresh-progress__bar"></span>
      </div>

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

  <div class="reasons-modal-root" data-reasons-modal-root>
    <div
      class="kt-reasons-content-modal"
      data-reasons-modal
      role="dialog"
      aria-modal="true"
      aria-labelledby="reasons-modal-title"
      hidden
    >
      <div class="kt-reasons-content-modal__dialog" data-reasons-modal-dialog>
        <div class="kt-reasons-content-modal__header">
          <div class="kt-reasons-content-modal__heading">
            <span aria-hidden="true"><i class="ti ti-file-text"></i></span>
            <h2 id="reasons-modal-title"><%= reasonsLongTextTitle %></h2>
          </div>
          <button
            class="kt-reasons-modal-close"
            type="button"
            data-reasons-modal-close
            aria-label="<%= i18n.__('common.close') %>"
          >
            <i class="ti ti-x" aria-hidden="true"></i>
          </button>
        </div>
        <div class="kt-reasons-content-modal__body">
          <p data-reasons-modal-content></p>
        </div>
        <div class="kt-reasons-content-modal__footer">
          <button class="kt-btn kt-btn--secondary" type="button" data-reasons-modal-close>
            <%= i18n.__('common.close') %>
          </button>
        </div>
      </div>
    </div>

    <div
      class="kt-reasons-delete-modal"
      data-reasons-delete-modal
      data-reasons-single-title="<%= reasonsSingleDeleteTitle %>"
      data-reasons-single-description="<%= reasonsSingleDeleteDescription %>"
      data-reasons-single-confirm="<%= reasonsSingleDeleteConfirm %>"
      data-reasons-bulk-title="<%= reasonsBulkDeleteTitle %>"
      data-reasons-bulk-description="<%= reasonsBulkDeleteDescription %>"
      data-reasons-bulk-confirm="<%= reasonsBulkDeleteLabel %>"
      role="alertdialog"
      aria-modal="true"
      aria-labelledby="reasons-delete-title"
      aria-describedby="reasons-delete-description"
      hidden
    >
      <div class="kt-reasons-delete-modal__dialog" data-reasons-delete-dialog>
        <span class="kt-reasons-delete-modal__icon" aria-hidden="true">
          <i class="ti ti-trash"></i>
        </span>
        <div class="kt-reasons-delete-modal__copy">
          <h2 id="reasons-delete-title" data-reasons-delete-title><%= reasonsSingleDeleteTitle %></h2>
          <p id="reasons-delete-description" data-reasons-delete-description>
            <%= reasonsSingleDeleteDescription %>
          </p>
        </div>
        <div class="kt-reasons-delete-modal__actions">
          <button class="kt-btn kt-btn--secondary" type="button" data-reasons-delete-cancel>
            <%= i18n.__('common.cancel') %>
          </button>
          <button
            class="kt-btn kt-btn--danger kt-reasons-delete-modal__confirm"
            type="button"
            data-reasons-delete-confirm
            data-reasons-default-label="<%= reasonsSingleDeleteConfirm %>"
            data-reasons-loading-label="<%= reasonsDeleteLoadingLabel %>"
          >
            <i class="ti ti-trash" data-reasons-delete-confirm-icon aria-hidden="true"></i>
            <i
              class="ti ti-loader-2 kt-reasons-spinner"
              data-reasons-delete-confirm-spinner
              aria-hidden="true"
              hidden
            ></i>
            <span data-reasons-delete-confirm-label><%= reasonsSingleDeleteConfirm %></span>
          </button>
        </div>
      </div>
    </div>
  </div>
</section>

<script src="/admin/assets/js/pages/reasons.js?v=2.5.2.3"></script>
