<%
  const formCity = typeof city !== 'undefined' && city ? city : {};
  const cityName = formCity.name || {};
  const cityArValue = typeof cityName.ar === 'string' ? cityName.ar : '';
  const cityEnValue = typeof cityName.en === 'string' ? cityName.en : '';
  const cityStatusValue = formCity.isVisible === true
    ? 'true'
    : (formCity.isVisible === false ? 'false' : '');
  const cityCountryValue = String(
    formCity.country && (formCity.country.id || formCity.country._id)
      ? (formCity.country.id || formCity.country._id)
      : ''
  );
  const cityCountriesSource = Array.isArray(countries)
    ? countries
    : (countries && Array.isArray(countries.countries) ? countries.countries : []);
  const cityLocale = typeof lang === 'string'
    ? lang
    : (i18n && typeof i18n.getLocale === 'function' ? i18n.getLocale() : 'ar');
  const cityIsEnglish = String(cityLocale).toLowerCase().startsWith('en');
  const cityLanguageKey = cityIsEnglish ? 'en' : 'ar';
  const cityArLabel = i18n.__('countries.cityForm.nameArLabel');
  const cityEnLabel = i18n.__('countries.cityForm.nameEnLabel');
  const cityStatusLabel = i18n.__('countries.cityForm.statusLabel');
  const cityCountryLabel = i18n.__('countries.cityForm.countryLabel');
  const cityArPlaceholder = i18n.__('countries.cityForm.nameArPlaceholder');
  const cityEnPlaceholder = i18n.__('countries.cityForm.nameEnPlaceholder');
  const cityArRequiredMessage = i18n.__('countries.cityForm.nameArRequired');
  const cityEnRequiredMessage = i18n.__('countries.cityForm.nameEnRequired');
  const cityMinLengthMessage = i18n.__('countries.cityForm.minLength');
  const cityArScriptMessage = i18n.__('countries.cityForm.arabicOnly');
  const cityEnScriptMessage = i18n.__('countries.cityForm.englishOnly');
  const cityStatusRequiredMessage = i18n.__('countries.cityForm.statusRequired');
  const cityCountryRequiredMessage = i18n.__('countries.cityForm.countryRequired');
  const cityStatusPlaceholder = i18n.__('countries.cityForm.statusPlaceholder');
  const cityCountryPlaceholder = i18n.__('countries.cityForm.countryPlaceholder');
  const cityEnabledLabel = i18n.__('common.enable');
  const cityDisabledLabel = i18n.__('common.disable');
  const cityStatusSelectedLabel = cityStatusValue === 'true'
    ? cityEnabledLabel
    : (cityStatusValue === 'false' ? cityDisabledLabel : cityStatusPlaceholder);
  const selectedCountry = cityCountriesSource.find((item) => {
    const itemId = String(item && (item.id || item._id) ? (item.id || item._id) : '');
    return itemId === cityCountryValue;
  });
  const countryNameFor = (item) => {
    const itemName = item && item.name ? item.name : {};
    return itemName[cityLanguageKey] || itemName.ar || itemName.en || '';
  };
  const cityCountrySelectedLabel = selectedCountry
    ? countryNameFor(selectedCountry)
    : cityCountryPlaceholder;
%>

<input type="hidden" name="_csrf" value="<%= csrfToken %>">
<input type="hidden" name="hasCountry" value="<%= Boolean(hasCountry) %>">

<div class="kt-reasons-form__grid">
  <div class="kt-field kt-reasons-form__field" data-city-field>
    <label class="kt-label kt-reasons-form__label" for="city-name-ar">
      <span><%= cityArLabel %></span>
      <span class="kt-reasons-form__language" aria-hidden="true">AR</span>
    </label>
    <div class="kt-reasons-control">
      <textarea
        class="kt-textarea kt-reasons-form__textarea"
        id="city-name-ar"
        name="ar"
        dir="rtl"
        lang="ar"
        rows="3"
        required
        minlength="2"
        data-city-autosize
        aria-describedby="city-name-ar-error"
        aria-invalid="false"
        data-city-required-message="<%= cityArRequiredMessage %>"
        data-city-minlength-message="<%= cityMinLengthMessage %>"
        data-city-script="arabic"
        data-city-script-message="<%= cityArScriptMessage %>"
        placeholder="<%= cityArPlaceholder %>"
      ><%= cityArValue %></textarea>
    </div>
    <p
      class="kt-field__error kt-reasons-form__feedback"
      id="city-name-ar-error"
      data-city-field-error
      aria-live="polite"
      aria-hidden="true"
    >
      <i class="ti ti-alert-circle" aria-hidden="true"></i>
      <span data-city-field-error-message></span>
    </p>
  </div>

  <div class="kt-field kt-reasons-form__field" data-city-field>
    <label class="kt-label kt-reasons-form__label" for="city-name-en">
      <span><%= cityEnLabel %></span>
      <span class="kt-reasons-form__language" aria-hidden="true">EN</span>
    </label>
    <div class="kt-reasons-control">
      <textarea
        class="kt-textarea kt-reasons-form__textarea"
        id="city-name-en"
        name="en"
        dir="ltr"
        lang="en"
        rows="3"
        required
        minlength="2"
        data-city-autosize
        aria-describedby="city-name-en-error"
        aria-invalid="false"
        data-city-required-message="<%= cityEnRequiredMessage %>"
        data-city-minlength-message="<%= cityMinLengthMessage %>"
        data-city-script="latin"
        data-city-script-message="<%= cityEnScriptMessage %>"
        placeholder="<%= cityEnPlaceholder %>"
      ><%= cityEnValue %></textarea>
    </div>
    <p
      class="kt-field__error kt-reasons-form__feedback"
      id="city-name-en-error"
      data-city-field-error
      aria-live="polite"
      aria-hidden="true"
    >
      <i class="ti ti-alert-circle" aria-hidden="true"></i>
      <span data-city-field-error-message></span>
    </p>
  </div>

  <div class="kt-field kt-reasons-form__field" data-city-field>
    <label class="kt-label kt-reasons-form__label" id="city-status-label" for="city-status-trigger">
      <%= cityStatusLabel %>
    </label>
    <div class="kt-reasons-select" data-city-select>
      <select
        class="kt-reasons-select__native"
        id="city-status"
        name="isVisible"
        required
        aria-describedby="city-status-error"
        aria-invalid="false"
        aria-hidden="true"
        tabindex="-1"
        data-city-native-select
        data-city-required-message="<%= cityStatusRequiredMessage %>"
        data-city-valid-values="true,false"
      >
        <option value="" <%= !cityStatusValue ? 'selected' : '' %> disabled>
          <%= cityStatusPlaceholder %>
        </option>
        <option value="true" data-tone="available" <%= cityStatusValue === 'true' ? 'selected' : '' %>>
          <%= cityEnabledLabel %>
        </option>
        <option value="false" data-tone="unavailable" <%= cityStatusValue === 'false' ? 'selected' : '' %>>
          <%= cityDisabledLabel %>
        </option>
      </select>

      <button
        class="kt-reasons-select__trigger"
        id="city-status-trigger"
        type="button"
        role="combobox"
        aria-autocomplete="none"
        aria-haspopup="listbox"
        aria-required="true"
        aria-expanded="false"
        aria-controls="city-status-listbox"
        aria-labelledby="city-status-label city-status-value"
        aria-describedby="city-status-error"
        aria-invalid="false"
        data-city-select-trigger
      >
        <span class="kt-reasons-select__selection">
          <span
            class="kt-reasons-select__dot<%= cityStatusValue === 'true' ? ' kt-reasons-select__dot--available' : (cityStatusValue === 'false' ? ' kt-reasons-select__dot--unavailable' : '') %>"
            data-city-select-marker
            aria-hidden="true"
          ></span>
          <span class="kt-reasons-select__value" id="city-status-value" data-city-select-value>
            <%= cityStatusSelectedLabel %>
          </span>
        </span>
        <span class="kt-reasons-select__chevron" aria-hidden="true">
          <svg viewBox="0 0 20 20" focusable="false">
            <path d="m5.75 7.75 4.25 4.25 4.25-4.25"></path>
          </svg>
        </span>
      </button>

      <div
        class="kt-reasons-select__menu"
        id="city-status-listbox"
        role="listbox"
        aria-labelledby="city-status-label"
        data-city-select-menu
        hidden
      >
        <button
          class="kt-reasons-select__option"
          id="city-status-option-enabled"
          type="button"
          role="option"
          tabindex="-1"
          aria-selected="<%= cityStatusValue === 'true' ? 'true' : 'false' %>"
          data-city-select-option
          data-value="true"
          data-tone="available"
        >
          <span class="kt-reasons-select__option-copy">
            <span class="kt-reasons-select__dot kt-reasons-select__dot--available" aria-hidden="true"></span>
            <span class="kt-reasons-select__option-label" data-city-select-option-label><%= cityEnabledLabel %></span>
          </span>
          <span class="kt-reasons-select__check" aria-hidden="true">
            <svg viewBox="0 0 20 20" focusable="false">
              <path d="m5.5 10.25 2.75 2.75 6.25-6.25"></path>
            </svg>
          </span>
        </button>

        <button
          class="kt-reasons-select__option"
          id="city-status-option-disabled"
          type="button"
          role="option"
          tabindex="-1"
          aria-selected="<%= cityStatusValue === 'false' ? 'true' : 'false' %>"
          data-city-select-option
          data-value="false"
          data-tone="unavailable"
        >
          <span class="kt-reasons-select__option-copy">
            <span class="kt-reasons-select__dot kt-reasons-select__dot--unavailable" aria-hidden="true"></span>
            <span class="kt-reasons-select__option-label" data-city-select-option-label><%= cityDisabledLabel %></span>
          </span>
          <span class="kt-reasons-select__check" aria-hidden="true">
            <svg viewBox="0 0 20 20" focusable="false">
              <path d="m5.5 10.25 2.75 2.75 6.25-6.25"></path>
            </svg>
          </span>
        </button>
      </div>
    </div>
    <p
      class="kt-field__error kt-reasons-form__feedback"
      id="city-status-error"
      data-city-field-error
      aria-live="polite"
      aria-hidden="true"
    >
      <i class="ti ti-alert-circle" aria-hidden="true"></i>
      <span data-city-field-error-message></span>
    </p>
  </div>

  <div class="kt-field kt-reasons-form__field" data-city-field>
    <label class="kt-label kt-reasons-form__label" id="city-country-label" for="city-country-trigger">
      <%= cityCountryLabel %>
    </label>
    <div class="kt-reasons-select kt-city-country-select" data-city-select>
      <select
        class="kt-reasons-select__native"
        id="city-country"
        name="country"
        required
        aria-describedby="city-country-error"
        aria-invalid="false"
        aria-hidden="true"
        tabindex="-1"
        data-city-native-select
        data-city-required-message="<%= cityCountryRequiredMessage %>"
      >
        <option value="" <%= !cityCountryValue ? 'selected' : '' %> disabled>
          <%= cityCountryPlaceholder %>
        </option>
        <% cityCountriesSource.forEach((item, index) => {
          const itemId = String(item && (item.id || item._id) ? (item.id || item._id) : '');
          const itemName = countryNameFor(item);
          if (!itemId || !itemName) return;
        %>
          <option value="<%= itemId %>" <%= itemId === cityCountryValue ? 'selected' : '' %>>
            <%= itemName %>
          </option>
        <% }) %>
      </select>

      <button
        class="kt-reasons-select__trigger"
        id="city-country-trigger"
        type="button"
        role="combobox"
        aria-autocomplete="none"
        aria-haspopup="listbox"
        aria-required="true"
        aria-expanded="false"
        aria-controls="city-country-listbox"
        aria-labelledby="city-country-label city-country-value"
        aria-describedby="city-country-error"
        aria-invalid="false"
        data-city-select-trigger
      >
        <span class="kt-reasons-select__selection">
          <span class="kt-city-select__country-marker" aria-hidden="true">
            <i class="ti ti-world"></i>
          </span>
          <span class="kt-reasons-select__value" id="city-country-value" data-city-select-value>
            <%= cityCountrySelectedLabel %>
          </span>
        </span>
        <span class="kt-reasons-select__chevron" aria-hidden="true">
          <svg viewBox="0 0 20 20" focusable="false">
            <path d="m5.75 7.75 4.25 4.25 4.25-4.25"></path>
          </svg>
        </span>
      </button>

      <div
        class="kt-reasons-select__menu kt-city-country-select__menu"
        id="city-country-listbox"
        role="listbox"
        aria-labelledby="city-country-label"
        data-city-select-menu
        hidden
      >
        <% cityCountriesSource.forEach((item, index) => {
          const itemId = String(item && (item.id || item._id) ? (item.id || item._id) : '');
          const itemName = countryNameFor(item);
          if (!itemId || !itemName) return;
        %>
          <button
            class="kt-reasons-select__option"
            id="city-country-option-<%= index %>"
            type="button"
            role="option"
            tabindex="-1"
            aria-selected="<%= itemId === cityCountryValue ? 'true' : 'false' %>"
            data-city-select-option
            data-value="<%= itemId %>"
          >
            <span class="kt-reasons-select__option-copy">
              <span class="kt-city-select__country-marker" aria-hidden="true">
                <i class="ti ti-map-pin"></i>
              </span>
              <span class="kt-reasons-select__option-label" data-city-select-option-label><%= itemName %></span>
            </span>
            <span class="kt-reasons-select__check" aria-hidden="true">
              <svg viewBox="0 0 20 20" focusable="false">
                <path d="m5.5 10.25 2.75 2.75 6.25-6.25"></path>
              </svg>
            </span>
          </button>
        <% }) %>
      </div>
    </div>
    <p
      class="kt-field__error kt-reasons-form__feedback"
      id="city-country-error"
      data-city-field-error
      aria-live="polite"
      aria-hidden="true"
    >
      <i class="ti ti-alert-circle" aria-hidden="true"></i>
      <span data-city-field-error-message></span>
    </p>
  </div>
</div>
