{% extends 'layout.twig' %}
{% import 'partials/icons.twig' as icons %}
{% block title %}Géographie{% endblock %}
{% block heading %}Géographie{% endblock %}
{% block subheading %}Référentiel géographique — pays, régions, sous-régions et villes{% endblock %}

{% set geoTabs = {
  'countries':  { 'label': 'Pays',          'icon': 'flag' },
  'regions':    { 'label': 'Régions',       'icon': 'globe' },
  'subregions': { 'label': 'Sous-régions',  'icon': 'globe' },
  'cities':     { 'label': 'Villes',        'icon': 'pin' }
} %}

{% block content %}
  <div data-geography data-list-url="{{ listUrl }}">
    <div class="alert alert--error" data-geo-error hidden>
      Le service Hydrogen est injoignable — impossible de charger le référentiel géographique.
    </div>

    <p class="geo__readonly muted">
      {{ icons.i('shield') }}
      Référentiel en <strong>lecture seule</strong> : Hydrogen n'expose pas encore d'endpoint
      d'écriture sur les index géographiques. La consultation et la recherche sont disponibles ;
      l'édition le sera lorsque l'API correspondante existera.
    </p>

    <article class="card glass" data-animate>
      <div class="geo__tabs" role="tablist">
        {% for resource, tab in geoTabs %}
          <button
            type="button"
            class="geo__tab{{ loop.first ? ' is-active' : '' }}"
            role="tab"
            data-geo-tab
            data-resource="{{ resource }}"
            aria-selected="{{ loop.first ? 'true' : 'false' }}"
          >
            <span class="geo__tab-icon">{{ icons.i(tab.icon) }}</span>{{ tab.label }}
          </button>
        {% endfor %}
      </div>

      <div class="geo__toolbar">
        <label class="geo__search">
          {{ icons.i('search') }}
          <input type="search" data-geo-search placeholder="Rechercher un nom…" autocomplete="off">
        </label>
        <input class="geo__filter" data-geo-country placeholder="Filtre pays (ex. FR)" autocomplete="off" maxlength="2" hidden>
      </div>

      <ul class="geo__list" data-geo-results>
        {% for i in 1..8 %}
          <li class="geo__row geo__row--skel">
            <span class="skeleton skeleton--text" style="width:42%;height:18px"></span>
            <span class="skeleton skeleton--text" style="width:24%;height:13px"></span>
          </li>
        {% endfor %}
      </ul>

      <p class="geo__empty muted" data-geo-empty hidden>Aucun résultat.</p>

      <div class="geo__foot">
        <span class="muted" data-geo-count></span>
        <button type="button" class="btn-ghost" data-geo-more hidden>Charger plus</button>
      </div>
    </article>
  </div>
{% endblock %}