{% import "partials/icons.html" as icons %}
<div class="flex flex-col gap-4">
  {% if geo_stats.entries.is_empty() %}
  <div class="rounded-lg border border-dashed px-4 py-6 text-sm text-text-secondary">
    <p class="text-center">No data recorded yet.</p>
  </div>
  {% else %}
  <div class="rounded-lg border bg-surface overflow-hidden">
    <world-map
      class="block w-full"
      data-countries="{% for entry in geo_stats.entries %}{% if !entry.iso_code.is_empty() %}{% if !loop.first %},{% endif %}{{ entry.iso_code }}:{{ entry.count }}{% endif %}{% endfor %}"
      data-max="{{ geo_stats.max_count }}"
    ></world-map>
  </div>

  <chip-scroll class="relative block">
    <button type="button" aria-label="Scroll left"
      class="hidden absolute left-0 top-1/2 z-10 -translate-y-1/2 items-center justify-center rounded-full border bg-surface p-1 text-text-muted shadow-sm transition hover:text-text"
      data-scroll-left
      onclick="this.closest('chip-scroll').querySelector('[data-chip-scroll]').scrollBy({left: -200, behavior: 'smooth'})">
      {{ icons::chevron_left("h-4 w-4") }}
    </button>
    <div class="flex gap-2 overflow-x-auto scroll-smooth snap-x snap-mandatory scrollbar-hide" data-chip-scroll>
      {% for entry in geo_stats.entries %}
      {% if !entry.iso_code.is_empty() %}
      <button type="button"
        class="inline-flex shrink-0 snap-start items-center rounded-full border text-sm transition cursor-pointer"
        data-iso="{{ entry.iso_code|lower }}"
        onclick="const map = document.querySelector('world-map'); const iso = this.dataset.iso; const cur = map.getAttribute('data-selected'); if (cur === iso) { map.removeAttribute('data-selected'); } else { map.setAttribute('data-selected', iso); } document.querySelectorAll('[data-iso]').forEach(b => b.classList.toggle('bg-accent-subtle', b.dataset.iso === map.getAttribute('data-selected')));">
        <span class="inline-flex items-center gap-1.5 py-1.5 pl-3 pr-2">
          {% if !entry.flag_emoji.is_empty() %}
          <span>{{ entry.flag_emoji }}</span>
          {% endif %}
          <span class="text-text whitespace-nowrap">{{ entry.country_name }}</span>
        </span>
        <span class="border-l py-1.5 pl-2 pr-3 font-medium text-text">{{ entry.count }}</span>
      </button>
      {% else %}
      <div class="inline-flex shrink-0 snap-start items-center rounded-full border text-sm">
        <span class="inline-flex items-center gap-1.5 py-1.5 pl-3 pr-2">
          <span class="text-text whitespace-nowrap">{{ entry.country_name }}</span>
        </span>
        <span class="border-l py-1.5 pl-2 pr-3 font-medium text-text">{{ entry.count }}</span>
      </div>
      {% endif %}
      {% endfor %}
    </div>
    <button type="button" aria-label="Scroll right"
      class="hidden absolute right-0 top-1/2 z-10 -translate-y-1/2 items-center justify-center rounded-full border bg-surface p-1 text-text-muted shadow-sm transition hover:text-text"
      data-scroll-right
      onclick="this.closest('chip-scroll').querySelector('[data-chip-scroll]').scrollBy({left: 200, behavior: 'smooth'})">
      {{ icons::chevron_right("h-4 w-4") }}
    </button>
  </chip-scroll>

  <p class="text-xs text-text-muted">{{ geo_stats.total_countries }} {% if geo_stats.total_countries == 1 %}country{% else %}countries{% endif %}</p>
  {% endif %}
</div>