<%
  const reasonsCreateLocale = typeof lang === 'string'
    ? lang
    : (i18n && typeof i18n.getLocale === 'function' ? i18n.getLocale() : 'ar');
  const reasonsCreateIsEnglish = String(reasonsCreateLocale).toLowerCase().startsWith('en');
  const reasonsCreateLoadingLabel = reasonsCreateIsEnglish ? 'Adding...' : 'جاري الإضافة...';
  const reasonsCreateTitle = reasonsCreateIsEnglish ? 'Add reason' : 'إضافة سبب';
  const reasonsFormSubtitle = reasonsCreateIsEnglish
    ? 'Write one clear reason in Arabic and English.'
    : 'اكتب سببًا واضحًا بالعربية والإنجليزية.';
  const reasonsFormCardTitle = reasonsCreateIsEnglish ? 'Reason details' : 'بيانات السبب';
  const reasonsFormCardDescription = reasonsCreateIsEnglish
    ? 'Complete the bilingual content, then choose its availability.'
    : 'أكمل المحتوى باللغتين، ثم حدّد حالة ظهوره.';
%>

<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--form"
  dir="<%= reasonsCreateIsEnglish ? 'ltr' : 'rtl' %>"
>
  <div class="reasons-container reasons-container--form 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-plus"></i>
        </span>
        <div class="kt-reasons-hero__copy">
          <h1 class="kt-reasons-hero__title"><%= reasonsCreateTitle %></h1>
          <p class="kt-reasons-hero__description"><%= reasonsFormSubtitle %></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>

    <section class="kt-reasons-form-surface" aria-labelledby="reasons-form-title">
      <form
        class="kt-reasons-form"
        method="POST"
        action="/dashboard/reasons/create"
        data-reasons-form
        novalidate
      >
        <div class="kt-reasons-form-surface__header">
          <div class="kt-reasons-form-surface__identity">
            <span class="kt-reasons-form-surface__icon" aria-hidden="true">
              <i class="ti ti-language"></i>
            </span>
            <div>
              <h2 id="reasons-form-title"><%= reasonsFormCardTitle %></h2>
              <p><%= reasonsFormCardDescription %></p>
            </div>
          </div>
          <span class="kt-reasons-language-pair" aria-label="Arabic and English">
            <span>AR</span>
            <i class="ti ti-arrows-exchange" aria-hidden="true"></i>
            <span>EN</span>
          </span>
        </div>

        <div class="kt-reasons-form__body">
          <%- include('./partials/formFields.ejs', {
            reason: null,
            csrfToken,
            i18n,
            lang: reasonsCreateLocale
          }) %>
          <p class="kt-reasons-form__message" data-reasons-form-message aria-live="polite"></p>
        </div>

        <div class="kt-reasons-form__footer">
          <button
            class="kt-btn kt-btn--primary kt-reasons-submit"
            type="submit"
            data-reasons-submit
            data-reasons-default-label="<%= i18n.__('common.add') %>"
            data-reasons-loading-label="<%= reasonsCreateLoadingLabel %>"
          >
            <i class="ti ti-check" data-reasons-submit-icon aria-hidden="true"></i>
            <i class="ti ti-loader-2 kt-reasons-spinner" data-reasons-submit-spinner aria-hidden="true" hidden></i>
            <span data-reasons-submit-label><%= i18n.__('common.add') %></span>
          </button>
        </div>
      </form>
    </section>
  </div>
</section>

<script src="/admin/assets/js/pages/reasons.js?v=2.5.2.1"></script>
