<%
  const safeReasons = Array.isArray(reasons) ? reasons : [];
  const reasonsTableLocale = typeof lang === 'string' && lang.toLowerCase().startsWith('en') ? 'en' : 'ar';
  const reasonsEmptyTitle = reasonsTableLocale === 'ar' ? 'لا توجد أسباب حتى الآن' : 'No reasons yet';
  const reasonsEmptyDescription = reasonsTableLocale === 'ar'
    ? 'ابدأ بإضافة أول سبب ليظهر هنا ضمن سجل المحتوى.'
    : 'Add the first reason to start building this content resource.';
  const reasonsTableCaption = reasonsTableLocale === 'ar'
    ? 'سجل أسباب الإلغاء والرفض'
    : 'Cancellation and rejection reasons register';
  const reasonsResourceHeading = reasonsTableLocale === 'ar' ? 'السبب' : 'Reason';
  const reasonsResourceHelper = reasonsTableLocale === 'ar' ? 'العربية / English' : 'Arabic / English';
  const reasonsTotalLabel = reasonsTableLocale === 'ar' ? 'إجمالي السجلات' : 'Total records';
  const reasonsCurrentListLabel = reasonsTableLocale === 'ar'
    ? 'البيانات المعروضة في القائمة الحالية'
    : 'Records shown in the current list';
%>

<div class="kt-reasons-table-fragment" data-reasons-table-fragment>
  <% if (!safeReasons.length) { %>
    <div class="kt-reasons-empty" data-reasons-empty>
      <span class="kt-reasons-empty__icon" aria-hidden="true">
        <i class="ti ti-message-off"></i>
      </span>
      <div class="kt-reasons-empty__copy">
        <h3><%= reasonsEmptyTitle %></h3>
        <p><%= reasonsEmptyDescription %></p>
      </div>
      <a class="kt-btn kt-btn--primary" href="/dashboard/reasons/create">
        <i class="ti ti-plus" aria-hidden="true"></i>
        <span><%= i18n.__('common.add') %></span>
      </a>
    </div>
  <% } else { %>
    <div class="reasons-table-scroll kt-reasons-table-scroll">
      <table class="kt-reasons-table">
        <caption class="kt-reasons-visually-hidden"><%= reasonsTableCaption %></caption>
        <colgroup>
          <col class="kt-reasons-table__col kt-reasons-table__col--selection">
          <col class="kt-reasons-table__col kt-reasons-table__col--resource">
          <col class="kt-reasons-table__col kt-reasons-table__col--date">
          <col class="kt-reasons-table__col kt-reasons-table__col--status">
          <col class="kt-reasons-table__col kt-reasons-table__col--actions">
        </colgroup>
        <thead>
          <tr>
            <th data-reasons-column="selection">
              <input
                class="kt-reasons-checkbox"
                type="checkbox"
                data-reasons-checkbox
                data-reasons-select-all
                aria-label="<%= i18n.__('common.checkAll') %>"
              >
            </th>
            <th data-reasons-column="resource">
              <span class="kt-reasons-table__resource-heading">
                <strong><%= reasonsResourceHeading %></strong>
                <small><%= reasonsResourceHelper %></small>
              </span>
            </th>
            <th data-reasons-column="date"><%= i18n.__('common.date') %></th>
            <th data-reasons-column="status"><%= i18n.__('common.status') %></th>
            <th data-reasons-column="actions"><%= i18n.__('common.control') %></th>
          </tr>
        </thead>
        <tbody data-reasons-table-body>
          <%- include('./tds.ejs', { reasons: safeReasons }) %>
        </tbody>
      </table>
    </div>

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

  <% } %>

  <footer class="kt-reasons-table-footer" data-reasons-table-footer>
    <span class="kt-reasons-table-footer__identity">
      <small><%= reasonsTotalLabel %></small>
      <strong data-reasons-footer-count><%= safeReasons.length %></strong>
    </span>
    <span class="kt-reasons-table-footer__helper"><%= reasonsCurrentListLabel %></span>
  </footer>
</div>
