<%- include('../operationsContent/assets.ejs') %>
<link rel="stylesheet" href="/admin/assets/css/pages/product-reporting.css?v=1.0.0">
<main class="kt-ops kt-product-reporting" data-ops-page>
  <div class="kt-ops__stack">
    <%- include('../operationsContent/hero.ejs', {
      heading: i18n.__('productReports.reasonDetails'),
      description: i18n.__('operationsContent.detailsDescription'),
      icon: 'ti-flag-3', count: 0, showCount: false,
      primaryUrl: '/dashboard/product-report-reasons/edit/' + reason.id,
      primaryLabel: i18n.__('operationsContent.edit'),
      primaryIcon: 'ti-edit',
      backUrl: '/dashboard/product-report-reasons'
    }) %>
    <section class="kt-ops-section">
      <header class="kt-ops-section__header">
        <span class="kt-product-reporting__reason-icon is-large" data-ops-media-wrap>
          <img src="<%= reason.icon %>" alt="" data-ops-media>
          <i class="ti ti-flag-3" data-ops-media-fallback hidden></i>
        </span>
        <div>
          <h2><%= reason.title[lang === 'ar' ? 'ar' : 'en'] %></h2>
          <p><%= i18n.__('productReports.reasonDetails') %></p>
        </div>
        <span class="kt-ops-status <%= reason.isActive ? 'kt-ops-status--success' : 'kt-ops-status--muted' %>">
          <i class="ti <%= reason.isActive ? 'ti-circle-check' : 'ti-eye-off' %>"></i>
          <%= i18n.__(reason.isActive ? 'productReports.active' : 'productReports.inactive') %>
        </span>
      </header>
      <div class="kt-ops-section__body">
        <div class="kt-ops-form-grid">
          <section class="kt-ops-language-card" dir="rtl" lang="ar">
            <div class="kt-ops-language-card__head"><strong><%= i18n.__('operationsContent.arabic') %></strong><span class="kt-ops-language-chip kt-ops-language-chip--ar">AR · عربي</span></div>
            <div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('productReports.titleAr') %></span><strong class="kt-ops-detail__value"><%= reason.title.ar %></strong></div>
            <div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('productReports.descriptionAr') %></span><div class="kt-ops-content-block"><%= reason.description.ar %></div></div>
          </section>
          <section class="kt-ops-language-card" dir="ltr" lang="en">
            <div class="kt-ops-language-card__head"><strong><%= i18n.__('operationsContent.english') %></strong><span class="kt-ops-language-chip">EN · English</span></div>
            <div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('productReports.titleEn') %></span><strong class="kt-ops-detail__value"><%= reason.title.en %></strong></div>
            <div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('productReports.descriptionEn') %></span><div class="kt-ops-content-block"><%= reason.description.en %></div></div>
          </section>
        </div>
        <div class="kt-product-reporting__detail-strip">
          <span><i class="ti ti-arrows-sort"></i><%= i18n.__('productReports.sortOrder') %>: <strong><%= reason.sortOrder %></strong></span>
          <span><i class="ti ti-calendar"></i><%= i18n.__('productReports.createdAt') %>: <strong><%= reason.createdAt ? moment(reason.createdAt).locale(lang).format('YYYY/MM/DD HH:mm') : '—' %></strong></span>
          <span><i class="ti ti-clock-edit"></i><%= i18n.__('productReports.updatedAt') %>: <strong><%= reason.updatedAt ? moment(reason.updatedAt).locale(lang).format('YYYY/MM/DD HH:mm') : '—' %></strong></span>
        </div>
      </div>
    </section>
  </div>
</main>
<%- include('../operationsContent/scripts.ejs') %>
