<%- 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 data-product-reporting-page
  data-ops-csrf-token="<%= csrfToken %>"
  data-ops-action-success="<%= i18n.__('operationsContent.actionSuccess') %>"
  data-ops-action-error="<%= i18n.__('operationsContent.actionError') %>">
  <div class="kt-ops__stack">
    <%- include('../operationsContent/hero.ejs', {
      heading: i18n.__('productReports.report') + ' #' + report.product.number,
      description: i18n.__('productReports.reportsDescription'),
      icon: 'ti-shield-exclamation', count: 0, showCount: false,
      primaryUrl: null, primaryLabel: null,
      backUrl: '/dashboard/product-reports'
    }) %>
    <section class="kt-product-reporting__report-detail">
      <header>
        <span class="kt-product-reporting__product-avatar is-large" data-ops-media-wrap>
          <% if (report.product.image) { %>
            <img src="<%= report.product.image %>" alt="" data-ops-media>
          <% } %>
          <i class="ti ti-package" data-ops-media-fallback <%= report.product.image ? 'hidden' : '' %>></i>
        </span>
        <div>
          <span class="kt-ops-eyebrow"><%= i18n.__('productReports.product') %> #<%= report.product.number %></span>
          <h2><%= report.product.displayName || '—' %></h2>
          <p><%= report.provider.name || '—' %></p>
        </div>
        <span class="kt-ops-status kt-ops-status--<%= report.status.replace('_', '-') %>">
          <%= i18n.__('productReports.' + report.status) %>
        </span>
      </header>
      <div class="kt-product-reporting__detail-grid">
        <section class="kt-ops-language-card">
          <div class="kt-ops-language-card__head">
            <strong><%= i18n.__('productReports.reason') %></strong>
            <span class="kt-product-reporting__reason-icon" data-ops-media-wrap>
              <img src="<%= report.reason.icon %>" alt="" data-ops-media>
              <i class="ti ti-flag-3" data-ops-media-fallback hidden></i>
            </span>
          </div>
          <div class="kt-ops-detail">
            <span class="kt-ops-detail__label"><%= i18n.__('productReports.reason') %></span>
            <strong class="kt-ops-detail__value"><%= report.reason.displayTitle %></strong>
          </div>
          <div class="kt-ops-detail">
            <span class="kt-ops-detail__label"><%= i18n.__('productReports.note') %></span>
            <div class="kt-ops-content-block"><%= report.note || i18n.__('operationsContent.noData') %></div>
          </div>
        </section>
        <section class="kt-ops-language-card">
          <div class="kt-ops-language-card__head">
            <strong><%= i18n.__('productReports.reporter') %></strong>
            <span class="kt-ops-language-chip"><i class="ti ti-user"></i></span>
          </div>
          <div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('productReports.reporter') %></span><strong class="kt-ops-detail__value"><%= report.reporter.name || '—' %></strong></div>
          <div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('productReports.provider') %></span><strong class="kt-ops-detail__value"><%= report.provider.name || '—' %></strong></div>
          <div class="kt-ops-detail"><span class="kt-ops-detail__label"><%= i18n.__('productReports.createdAt') %></span><strong class="kt-ops-detail__value"><%= report.createdAt ? moment(report.createdAt).locale(lang).format('YYYY/MM/DD HH:mm') : '—' %></strong></div>
        </section>
      </div>
      <div class="kt-product-reporting__entity-links">
        <% if (report.product.id) { %>
          <a class="kt-ops-btn" href="/dashboard/products/show/<%= report.product.id %>">
            <i class="ti ti-package-export"></i><span><%= i18n.__('productReports.viewProduct') %></span>
          </a>
        <% } %>
        <% if (report.provider.id) { %>
          <a class="kt-ops-btn" href="/dashboard/providers/show/<%= report.provider.id %>">
            <i class="ti ti-building-store"></i><span><%= i18n.__('productReports.viewProvider') %></span>
          </a>
        <% } %>
      </div>
      <section class="kt-product-reporting__review-panel">
        <div>
          <span class="kt-ops-section-icon"><i class="ti ti-shield-check"></i></span>
          <div>
            <h3><%= i18n.__('productReports.reviewAction') %></h3>
            <p><%= i18n.__('productReports.reviewActionHint') %></p>
          </div>
        </div>
        <form data-product-report-review-form data-report-id="<%= report.id %>">
          <div class="kt-ops-field" data-ops-field>
            <label for="detail-review-status"><%= i18n.__('productReports.status') %></label>
            <div data-ops-select>
              <select id="detail-review-status" name="status" data-ops-native-select required>
                <% ['reviewed', 'dismissed', 'action_taken'].forEach(function(status) { %>
                  <option value="<%= status %>" <%= report.status === status ? 'selected' : '' %>><%= i18n.__('productReports.' + status) %></option>
                <% }) %>
              </select>
            </div>
            <p class="kt-ops-field__error" data-ops-field-error></p>
          </div>
          <div class="kt-ops-field" data-ops-field>
            <label for="detail-review-notes"><%= i18n.__('productReports.adminNotes') %></label>
            <textarea class="kt-ops-control" id="detail-review-notes" name="adminNotes"
              maxlength="1000"><%= report.adminNotes || '' %></textarea>
            <p class="kt-ops-field__error" data-ops-field-error></p>
          </div>
          <button class="kt-ops-btn kt-ops-btn--primary" type="submit"
            data-ops-loading-label="<%= i18n.__('operationsContent.saving') %>">
            <span class="kt-ops-btn__spinner" data-ops-button-spinner hidden></span>
            <i class="ti ti-device-floppy"></i>
            <span data-ops-button-label><%= i18n.__('productReports.saveReview') %></span>
          </button>
        </form>
      </section>
    </section>
  </div>
</main>
<%- include('../operationsContent/scripts.ejs') %>
<script src="/admin/assets/js/pages/product-reporting.js?v=1.0.0"></script>
