<%
  const detailLocale = typeof lang === 'string' && lang.toLowerCase().startsWith('en') ? 'en' : 'ar';
  const detailEnglish = detailLocale === 'en';
  const detailMethod = String(report.method || 'GET').toUpperCase();
  const detailMethodClass = ['POST', 'PATCH', 'DELETE'].includes(detailMethod)
    ? detailMethod.toLowerCase()
    : 'neutral';
  const primaryMessage = report.message && report.message[detailLocale]
    ? report.message[detailLocale]
    : (report.message.ar || report.message.en || '');
  const secondaryMessage = report.message
    ? report.message[detailLocale === 'ar' ? 'en' : 'ar']
    : '';
  const detailCopy = detailEnglish ? {
    eyebrow: 'Audit event',
    title: 'Activity details',
    subtitle: 'Review the administrator, request path, and bilingual event description.',
    back: 'Back to audit log',
    event: 'Recorded event',
    admin: 'Administrator',
    request: 'Request context',
    method: 'HTTP method',
    path: 'Request path',
    timestamp: 'Timestamp',
    phone: 'Phone',
    email: 'Email',
    readOnly: 'This audit record is read-only'
  } : {
    eyebrow: 'حدث تدقيق',
    title: 'تفاصيل النشاط',
    subtitle: 'راجع المشرف ومسار الطلب ووصف الحدث باللغتين.',
    back: 'العودة لسجل التدقيق',
    event: 'الحدث الموثق',
    admin: 'المشرف',
    request: 'سياق الطلب',
    method: 'طريقة الطلب',
    path: 'مسار الطلب',
    timestamp: 'التوقيت',
    phone: 'رقم الهاتف',
    email: 'البريد الإلكتروني',
    readOnly: 'سجل التدقيق متاح للقراءة فقط'
  };
%>

<link rel="stylesheet" href="/admin/assets/css/pages/reports.css?v=2.6.4-bc3">

<section class="kt-reports-page kt-reports-page--detail" dir="<%= detailEnglish ? 'ltr' : 'rtl' %>">
  <div class="kt-reports-container kt-reports-container--detail">
    <header class="kt-reports-detail-hero">
      <div>
        <span aria-hidden="true"><i class="ti ti-shield-check"></i></span>
        <div>
          <small><%= detailCopy.eyebrow %></small>
          <h1><%= detailCopy.title %></h1>
          <p><%= detailCopy.subtitle %></p>
        </div>
      </div>
      <a href="/dashboard/reports">
        <i class="ti ti-arrow-back-up" aria-hidden="true"></i>
        <%= detailCopy.back %>
      </a>
    </header>

    <div class="kt-reports-detail-grid">
      <article class="kt-reports-detail-card kt-reports-detail-card--event">
        <header>
          <span aria-hidden="true"><i class="ti ti-activity"></i></span>
          <div>
            <h2><%= detailCopy.event %></h2>
            <p><%= detailCopy.readOnly %></p>
          </div>
          <span class="kt-reports-method is-<%= detailMethodClass %>"><%= detailMethod %></span>
        </header>
        <div class="kt-reports-detail-message">
          <strong><%= primaryMessage %></strong>
          <% if (secondaryMessage && secondaryMessage !== primaryMessage) { %>
            <p dir="<%= detailLocale === 'ar' ? 'ltr' : 'rtl' %>"><%= secondaryMessage %></p>
          <% } %>
        </div>
      </article>

      <article class="kt-reports-detail-card">
        <header>
          <span aria-hidden="true"><i class="ti ti-user-check"></i></span>
          <div><h2><%= detailCopy.admin %></h2></div>
        </header>
        <div class="kt-reports-detail-admin">
          <span><%= report.admin.initials %></span>
          <div>
            <strong><%= report.admin.name %></strong>
            <small><%= detailCopy.email %></small>
            <p dir="ltr"><%= report.admin.email || '—' %></p>
            <small><%= detailCopy.phone %></small>
            <p dir="ltr"><%= report.admin.phone || '—' %></p>
          </div>
        </div>
      </article>

      <article class="kt-reports-detail-card kt-reports-detail-card--request">
        <header>
          <span aria-hidden="true"><i class="ti ti-route"></i></span>
          <div><h2><%= detailCopy.request %></h2></div>
        </header>
        <dl>
          <div>
            <dt><%= detailCopy.method %></dt>
            <dd><span class="kt-reports-method is-<%= detailMethodClass %>"><%= detailMethod %></span></dd>
          </div>
          <div>
            <dt><%= detailCopy.path %></dt>
            <dd><code dir="ltr"><%= report.requestPath %></code></dd>
          </div>
          <div>
            <dt><%= detailCopy.timestamp %></dt>
            <dd><strong><%= report.date %></strong><small dir="ltr"><%= report.time %></small></dd>
          </div>
        </dl>
      </article>
    </div>
  </div>
</section>
