<%
  const previewLength = 82;
  const safeRows = Array.isArray(reasons) ? reasons : [];
  const reasonsRowLocale = typeof lang === 'string' && lang.toLowerCase().startsWith('en') ? 'en' : 'ar';
  const reasonsRowLabels = {
    date: i18n.__('common.date'),
    resource: i18n.__('reasons.reason'),
    status: i18n.__('common.status'),
    actions: i18n.__('common.control')
  };
%>

<% safeRows.forEach((item) => { %>
  <%
    const itemTitle = item && item.title ? item.title : {};
    const titleAr = typeof itemTitle.ar === 'string' ? itemTitle.ar : '';
    const titleEn = typeof itemTitle.en === 'string' ? itemTitle.en : '';
    const needsMoreAr = titleAr.length > previewLength;
    const needsMoreEn = titleEn.length > previewLength;
    const itemStatus = item.presentation.status;
    const itemId = item && item._id ? String(item._id) : '';
    const createdAt = item && item.createdAt ? new Date(item.createdAt) : null;
    const hasCreatedAt = createdAt && !Number.isNaN(createdAt.getTime());
    const accessibleName = titleAr || titleEn || (reasonsRowLocale === 'ar' ? 'سبب' : 'Reason');
  %>
  <tr data-reasons-row data-reason-id="<%= itemId %>">
    <td data-reasons-column="selection">
      <input
        class="kt-reasons-checkbox"
        type="checkbox"
        value="<%= itemId %>"
        data-reasons-checkbox
        data-reasons-row-checkbox
        aria-label="<%= i18n.__('reasons.reason') %>: <%= accessibleName %>"
      >
    </td>
    <td data-reasons-column="resource" data-label="<%= reasonsRowLabels.resource %>">
      <div class="kt-reasons-resource-cell">
        <span class="kt-reasons-resource-cell__marker" aria-hidden="true">
          <i class="ti ti-message-report"></i>
        </span>
        <div class="kt-reasons-resource-cell__copy">
          <div class="kt-reasons-resource-cell__line kt-reasons-resource-cell__line--primary" dir="rtl">
            <span class="kt-reasons-resource-cell__language" aria-hidden="true">AR</span>
            <span class="kt-reasons-table__preview">
              <%= needsMoreAr ? `${titleAr.slice(0, previewLength)}…` : titleAr %>
            </span>
            <% if (needsMoreAr) { %>
              <button
                class="kt-reasons-show-more"
                type="button"
                data-reasons-full-text
                data-reasons-text="<%= titleAr %>"
                data-reasons-direction="rtl"
              >
                <i class="ti ti-arrow-up-left" aria-hidden="true"></i>
                <span><%= i18n.__('common.showMore') %></span>
              </button>
            <% } %>
          </div>
          <div class="kt-reasons-resource-cell__line kt-reasons-resource-cell__line--secondary" dir="ltr">
            <span class="kt-reasons-resource-cell__language" aria-hidden="true">EN</span>
            <span class="kt-reasons-table__preview">
              <%= needsMoreEn ? `${titleEn.slice(0, previewLength)}…` : titleEn %>
            </span>
            <% if (needsMoreEn) { %>
              <button
                class="kt-reasons-show-more"
                type="button"
                data-reasons-full-text
                data-reasons-text="<%= titleEn %>"
                data-reasons-direction="ltr"
              >
                <i class="ti ti-arrow-up-right" aria-hidden="true"></i>
                <span><%= i18n.__('common.showMore') %></span>
              </button>
            <% } %>
          </div>
        </div>
      </div>
    </td>
    <td data-reasons-column="date" data-label="<%= reasonsRowLabels.date %>">
      <% if (hasCreatedAt) { %>
        <time datetime="<%= createdAt.toISOString() %>">
          <i class="ti ti-calendar-event" aria-hidden="true"></i>
          <span><%= moment(createdAt).locale(lang).format('YYYY/MM/DD') %></span>
        </time>
      <% } else { %>
        <span aria-hidden="true">—</span>
      <% } %>
    </td>
    <td data-reasons-column="status" data-label="<%= reasonsRowLabels.status %>">
      <span class="kt-reasons-status kt-reasons-status--<%= itemStatus.className %>">
        <span aria-hidden="true"></span>
        <%= i18n.__(itemStatus.labelKey) %>
      </span>
    </td>
    <td data-reasons-column="actions" data-label="<%= reasonsRowLabels.actions %>">
      <div class="kt-reasons-row-actions">
        <a
          class="kt-reasons-row-action"
          href="/dashboard/reasons/show/<%= itemId %>"
          aria-label="<%= i18n.__('common.show') %>: <%= accessibleName %>"
          title="<%= i18n.__('common.show') %>"
        >
          <i class="ti ti-eye" aria-hidden="true"></i>
        </a>
        <a
          class="kt-reasons-row-action"
          href="/dashboard/reasons/edit/<%= itemId %>"
          aria-label="<%= i18n.__('common.edit') %>: <%= accessibleName %>"
          title="<%= i18n.__('common.edit') %>"
        >
          <i class="ti ti-edit" aria-hidden="true"></i>
        </a>
        <button
          class="kt-reasons-row-action kt-reasons-row-action--delete"
          type="button"
          data-reasons-delete
          data-reason-id="<%= itemId %>"
          aria-label="<%= i18n.__('common.deleteSelector') %>: <%= accessibleName %>"
          title="<%= i18n.__('common.deleteSelector') %>"
        >
          <i class="ti ti-trash" aria-hidden="true"></i>
        </button>
      </div>
    </td>
  </tr>
<% }) %>
