<%
  const dashboardReasonIcon = (icon) => String(icon || '/admin/assets/img/product-report-reason-fallback.svg')
    .replace(/^https?:\/\/[^/]+(?=\/admin\/assets\/)/i, '');
%>
<% reasons.forEach(function(reason) { %>
  <article class="kt-product-reporting__reason-card <%= reason.isActive ? 'is-active' : 'is-inactive' %>"
    data-ops-row data-ops-row-id="<%= reason.id %>" role="listitem">
    <div class="kt-product-reporting__reason-top">
      <input class="kt-ops-check" type="checkbox" value="<%= reason.id %>"
        data-ops-row-checkbox aria-label="<%= i18n.__('operationsContent.selectRow') %>">
      <span class="kt-product-reporting__reason-icon" data-ops-media-wrap>
        <img src="<%= dashboardReasonIcon(reason.icon) %>" alt="" data-ops-media>
        <i class="ti ti-flag-3" data-ops-media-fallback hidden></i>
      </span>
      <span class="kt-ops-status <%= reason.isActive ? 'kt-ops-status--success' : 'kt-ops-status--muted' %>"
        data-product-reason-status>
        <i class="ti <%= reason.isActive ? 'ti-circle-check' : 'ti-eye-off' %>"></i>
        <span><%= i18n.__(reason.isActive ? 'productReports.active' : 'productReports.inactive') %></span>
      </span>
    </div>
    <div class="kt-product-reporting__reason-copy">
      <span class="kt-ops-language-chip kt-ops-language-chip--ar">AR · عربي</span>
      <h3 dir="rtl" lang="ar"><%= reason.title.ar %></h3>
      <p dir="rtl" lang="ar"><%= reason.description.ar %></p>
      <span class="kt-ops-language-chip">EN · English</span>
      <h4 dir="ltr" lang="en"><%= reason.title.en %></h4>
      <p dir="ltr" lang="en"><%= reason.description.en %></p>
    </div>
    <div class="kt-product-reporting__reason-meta">
      <span><i class="ti ti-arrows-sort"></i><%= i18n.__('productReports.sortOrder') %>: <strong><%= reason.sortOrder %></strong></span>
      <time datetime="<%= reason.createdAt ? new Date(reason.createdAt).toISOString() : '' %>">
        <i class="ti ti-calendar"></i>
        <%= reason.createdAt ? moment(reason.createdAt).locale(lang).format('YYYY/MM/DD') : '—' %>
      </time>
    </div>
    <div class="kt-ops-row__actions">
      <a class="kt-ops-action" href="/dashboard/product-report-reasons/show/<%= reason.id %>">
        <i class="ti ti-eye"></i><span><%= i18n.__('operationsContent.view') %></span>
      </a>
      <a class="kt-ops-action" href="/dashboard/product-report-reasons/edit/<%= reason.id %>">
        <i class="ti ti-edit"></i><span><%= i18n.__('operationsContent.edit') %></span>
      </a>
      <button class="kt-ops-action" type="button" data-product-reason-visibility
        data-reason-id="<%= reason.id %>" data-reason-active="<%= reason.isActive %>">
        <i class="ti <%= reason.isActive ? 'ti-eye-off' : 'ti-eye' %>"></i>
        <span><%= i18n.__(reason.isActive ? 'productReports.inactive' : 'productReports.active') %></span>
      </button>
      <button class="kt-ops-action kt-ops-action--danger" type="button"
        data-ops-delete data-ops-delete-id="<%= reason.id %>"
        data-ops-delete-url="/dashboard/product-report-reasons/delete">
        <i class="ti ti-trash"></i><span><%= i18n.__('operationsContent.delete') %></span>
      </button>
    </div>
  </article>
<% }) %>
