{#- Город рождения с автодополнением (city-autocomplete.js) и ручным режимом координат.
    Импорт: {% from "_partials/city_field.html" import city_field with context %}.
    p — префикс id (на странице совместимости полей два), values/errors — как у формы,
    n — начало имён полей и ключей values/errors («he_» у совместимости, у натальной карты пусто).

    Выбранный город заполняет city_id, lat, lon и tz. Поля lat/lon/tz — одни и те же в обоих
    режимах: в режиме списка они скрыты и несут координаты выбранного города, в ручном —
    видны и обязательны. Без JS ручной режим открывает CSS (:has), а проверяет сервер. -#}
{% from "_partials/icon.html" import icon %}
{% from "_partials/forms.html" import error_slot, invalid %}

{% macro city_field(p, values, errors, n="") -%}
<div class="city" data-city
     data-msg-found="{{ t('place.found') }}"
     data-msg-empty="{{ t('place.empty') }}"
     data-msg-unavailable="{{ t('place.unavailable') }}"
     data-msg-selected="{{ t('place.selected') }}"
     data-hemispheres="{{ t('place.hemispheres') }}">
  <div class="field city__auto">
    <label class="field__label" for="{{ p }}-place">{{ t("place.label") }}</label>
    <div class="combobox">
      {{ icon("map-pin", "combobox__icon") }}
      <input class="input combobox__input" id="{{ p }}-place" name="{{ n }}place" type="text"
             role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="{{ p }}-place-list"
             autocomplete="off" autocapitalize="words" spellcheck="false" maxlength="100"
             value="{{ values.get(n ~ 'place', '') }}"
             aria-describedby="{{ p }}-place-hint {{ p }}-place-error"
             data-msg-pick="{{ t('place.pick') }}"{{ invalid(errors, n ~ "place") }}>
      <ul class="listbox" id="{{ p }}-place-list" role="listbox" aria-label="{{ t('place.list') }}" hidden></ul>
    </div>
    <p class="field__hint" id="{{ p }}-place-hint" data-city-hint data-default>{{ t("place.hint") }}</p>
    {{ error_slot(p ~ "-place", errors.get(n ~ "place")) }}
    <p class="visually-hidden" role="status" data-city-status></p>
  </div>
  <input type="hidden" name="{{ n }}city_id" value="{{ values.get(n ~ 'city_id', '') }}" data-city-id>

  <label class="check city__toggle">
    <input class="check__input" type="checkbox" name="{{ n }}manual" value="1" data-city-manual
           {%- if values.get(n ~ "manual") == "1" %} checked{% endif %}>
    <span>{{ t("place.manual") }}</span>
  </label>

  <div class="city__manual">
    <div class="city__coords">
      <div class="field">
        <label class="field__label" for="{{ p }}-lat">{{ t("place.lat") }}</label>
        <input class="input" id="{{ p }}-lat" name="{{ n }}lat" type="number" data-city-lat min="-90" max="90" step="any"
               value="{{ values.get(n ~ 'lat', '') }}" autocomplete="off"
               aria-describedby="{{ p }}-coords-hint {{ p }}-lat-error"
               data-msg-missing="{{ t('place.lat_missing') }}" data-msg-invalid="{{ t('place.lat_invalid') }}"
               {{- invalid(errors, n ~ "lat") }}>
        {{ error_slot(p ~ "-lat", errors.get(n ~ "lat")) }}
      </div>
      <div class="field">
        <label class="field__label" for="{{ p }}-lon">{{ t("place.lon") }}</label>
        <input class="input" id="{{ p }}-lon" name="{{ n }}lon" type="number" data-city-lon min="-180" max="180" step="any"
               value="{{ values.get(n ~ 'lon', '') }}" autocomplete="off"
               aria-describedby="{{ p }}-coords-hint {{ p }}-lon-error"
               data-msg-missing="{{ t('place.lon_missing') }}" data-msg-invalid="{{ t('place.lon_invalid') }}"
               {{- invalid(errors, n ~ "lon") }}>
        {{ error_slot(p ~ "-lon", errors.get(n ~ "lon")) }}
      </div>
      <p class="field__hint city__coords-hint" id="{{ p }}-coords-hint">{{ t("place.coords_hint") }}</p>
    </div>
    <div class="field">
      <label class="field__label" for="{{ p }}-tz">{{ t("place.tz") }}</label>
      <input class="input" id="{{ p }}-tz" name="{{ n }}tz" type="text" maxlength="64" data-city-tz
             autocomplete="off" autocapitalize="off" spellcheck="false"
             value="{{ values.get(n ~ 'tz', '') }}"
             aria-describedby="{{ p }}-tz-hint {{ p }}-tz-error"
             data-msg-missing="{{ t('place.tz_missing') }}"{{ invalid(errors, n ~ "tz") }}>
      <p class="field__hint" id="{{ p }}-tz-hint">{{ t("place.tz_hint")|inline }}</p>
      {{ error_slot(p ~ "-tz", errors.get(n ~ "tz")) }}
    </div>
  </div>
</div>
{%- endmacro %}