<%
  const cityEditLocale = typeof lang === 'string'
    ? lang
    : (i18n && typeof i18n.getLocale === 'function' ? i18n.getLocale() : 'ar');
  const cityEditIsEnglish = String(cityEditLocale).toLowerCase().startsWith('en');
  const cityEditLoadingLabel = i18n.__('countries.cityForm.updating');
  const cityEditTitle = i18n.__('countries.cityForm.editTitle');
  const cityFormSubtitle = i18n.__('countries.cityForm.editSubtitle');
  const cityFormCardTitle = i18n.__('countries.cityForm.detailsTitle');
  const cityFormCardDescription = i18n.__('countries.cityForm.editDescription');
%>

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

<section
  class="reasons-page kt-reasons-page kt-reasons-page--form kt-city-page"
  dir="<%= cityEditIsEnglish ? '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-building-cog"></i>
        </span>
        <div class="kt-reasons-hero__copy">
          <h1 class="kt-reasons-hero__title"><%= cityEditTitle %></h1>
          <p class="kt-reasons-hero__description"><%= cityFormSubtitle %></p>
        </div>
      </div>
      <a class="kt-btn kt-btn--secondary kt-reasons-back" href="/dashboard/cities">
        <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="city-form-title">
      <form
        class="kt-reasons-form"
        id="editCity"
        method="POST"
        action="/dashboard/cities/edit/<%= city._id %>"
        data-city-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="city-form-title"><%= cityFormCardTitle %></h2>
              <p><%= cityFormCardDescription %></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', {
            city,
            countries,
            hasCountry,
            csrfToken,
            i18n,
            lang: cityEditLocale
          }) %>
          <p class="kt-reasons-form__message" data-city-form-message aria-live="polite"></p>
        </div>

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

<script src="/admin/assets/js/pages/city-form.js?v=1.0.0"></script>
