<%
  const showTitle = reason && reason.title ? reason.title : {};
  const showTitleAr = typeof showTitle.ar === 'string' ? showTitle.ar : '';
  const showTitleEn = typeof showTitle.en === 'string' ? showTitle.en : '';
  const showStatus = reason.presentation.status;
  const showLocaleCandidate = typeof lang === 'string'
    ? lang
    : (i18n && typeof i18n.getLocale === 'function' ? i18n.getLocale() : 'ar');
  const showLocale = String(showLocaleCandidate).toLowerCase().startsWith('en') ? 'en' : 'ar';
  const showDateLocale = showLocale === 'en' ? 'en-US' : 'ar-SA';
  const showUpdatedLabel = showLocale === 'en' ? 'Last updated' : 'آخر تحديث';
  const showPageTitle = showLocale === 'en' ? 'View reason' : 'عرض السبب';
  const showPageSubtitle = showLocale === 'en'
    ? 'Review the bilingual content and its current availability.'
    : 'راجع المحتوى باللغتين وحالة ظهوره الحالية.';
  const showCardTitle = showLocale === 'en' ? 'Reason details' : 'بيانات السبب';
  const showCardDescription = showLocale === 'en'
    ? 'The saved content and operational metadata.'
    : 'المحتوى المحفوظ والبيانات التشغيلية للسجل.';
  const showCreatedAt = reason && reason.createdAt ? new Date(reason.createdAt) : null;
  const showUpdatedAt = reason && reason.updatedAt ? new Date(reason.updatedAt) : null;
  const hasShowCreatedAt = showCreatedAt && !Number.isNaN(showCreatedAt.getTime());
  const hasShowUpdatedAt = showUpdatedAt && !Number.isNaN(showUpdatedAt.getTime());
  const showDateFormatter = new Intl.DateTimeFormat(showDateLocale, {
    dateStyle: 'medium',
    timeStyle: 'short',
  });
%>

<link rel="stylesheet" href="/admin/assets/css/pages/reasons.css?v=2.5.2.4">

<section
  class="reasons-page kt-reasons-page kt-reasons-page--show"
  dir="<%= showLocale === 'ar' ? 'rtl' : 'ltr' %>"
>
  <div class="reasons-container reasons-container--show kt-reasons-container">
    <header class="reasons-hero-card kt-reasons-hero kt-reasons-hero--compact">
      <div class="kt-reasons-hero__identity">
        <span class="kt-reasons-hero__icon" aria-hidden="true">
          <i class="ti ti-message-search"></i>
        </span>
        <div class="kt-reasons-hero__copy">
          <h1 class="kt-reasons-hero__title"><%= showPageTitle %></h1>
          <p class="kt-reasons-hero__description"><%= showPageSubtitle %></p>
        </div>
      </div>
      <a class="kt-btn kt-btn--secondary kt-reasons-back" href="/dashboard/reasons">
        <i class="ti ti-arrow-back-up" aria-hidden="true"></i>
        <span><%= i18n.__('common.referer') %></span>
      </a>
    </header>

    <article class="kt-reasons-details" aria-labelledby="reasons-details-title">
      <div class="kt-reasons-details__header">
        <div class="kt-reasons-details__identity">
          <span class="kt-reasons-details__icon" aria-hidden="true">
            <i class="ti ti-file-description"></i>
          </span>
          <div>
            <h2 id="reasons-details-title"><%= showCardTitle %></h2>
            <p><%= showCardDescription %></p>
          </div>
        </div>
        <span class="kt-reasons-status kt-reasons-status--<%= showStatus.className %>">
          <span aria-hidden="true"></span>
          <%= i18n.__(showStatus.labelKey) %>
        </span>
      </div>

      <div class="kt-reasons-details__body">
        <div class="kt-reasons-details__content-grid">
          <section class="kt-reasons-content-panel" aria-labelledby="reason-ar-heading">
            <div class="kt-reasons-content-panel__header">
              <h3 id="reason-ar-heading"><%= i18n.__('reasons.reasonAr') %></h3>
              <span aria-hidden="true">AR</span>
            </div>
            <p dir="rtl"><%= showTitleAr %></p>
          </section>

          <section class="kt-reasons-content-panel" aria-labelledby="reason-en-heading">
            <div class="kt-reasons-content-panel__header">
              <h3 id="reason-en-heading"><%= i18n.__('reasons.reasonEn') %></h3>
              <span aria-hidden="true">EN</span>
            </div>
            <p dir="ltr"><%= showTitleEn %></p>
          </section>
        </div>

        <dl class="kt-reasons-details__meta">
          <div class="kt-reasons-meta-item">
            <span aria-hidden="true"><i class="ti ti-circle-check"></i></span>
            <div>
              <dt><%= i18n.__('common.status') %></dt>
              <dd><%= i18n.__(showStatus.labelKey) %></dd>
            </div>
          </div>

          <% if (hasShowCreatedAt) { %>
            <div class="kt-reasons-meta-item">
              <span aria-hidden="true"><i class="ti ti-calendar-plus"></i></span>
              <div>
                <dt><%= i18n.__('common.createdAt') %></dt>
                <dd>
                  <time datetime="<%= showCreatedAt.toISOString() %>">
                    <%= showDateFormatter.format(showCreatedAt) %>
                  </time>
                </dd>
              </div>
            </div>
          <% } %>

          <% if (hasShowUpdatedAt) { %>
            <div class="kt-reasons-meta-item">
              <span aria-hidden="true"><i class="ti ti-calendar-time"></i></span>
              <div>
                <dt><%= showUpdatedLabel %></dt>
                <dd>
                  <time datetime="<%= showUpdatedAt.toISOString() %>">
                    <%= showDateFormatter.format(showUpdatedAt) %>
                  </time>
                </dd>
              </div>
            </div>
          <% } %>
        </dl>
      </div>

      <div class="kt-reasons-details__footer">
        <a class="kt-btn kt-btn--primary" href="/dashboard/reasons/edit/<%= reason._id %>">
          <i class="ti ti-edit" aria-hidden="true"></i>
          <span><%= i18n.__('common.edit') %></span>
        </a>
      </div>
    </article>
  </div>
</section>
