{# Klassische Seitennavigation: Zurück/Weiter + Seitenzahlen.
   Parameter: seiten_url (Funktion nr → URL), seite, gesamt_seiten.
   Funktioniert ohne JavaScript (einfache Links). #}
{% from "icons.html" import icon_chevron_links, icon_chevron_rechts %}
{% macro seitennavigation(seiten_url, seite, gesamt_seiten) %}
{% if gesamt_seiten > 1 %}
<nav class="flex flex-wrap items-center justify-between gap-3 mt-4" aria-label="Seitennavigation">
  <div>
    {% if seite > 1 %}
    <a href="{{ seiten_url(seite - 1) }}" rel="prev"
       class="inline-flex items-center gap-1 px-3 py-2 rounded-lg border border-slate-300 text-sm font-medium text-slate-700 hover:bg-slate-50">
      {{ icon_chevron_links("h-4 w-4") }} Zurück
    </a>
    {% else %}
    <span aria-disabled="true"
          class="inline-flex items-center gap-1 px-3 py-2 rounded-lg border border-slate-200 text-sm font-medium text-slate-300 cursor-not-allowed">
      {{ icon_chevron_links("h-4 w-4") }} Zurück
    </span>
    {% endif %}
  </div>
  <div class="flex flex-wrap items-center gap-1">
    <span class="hidden sm:inline text-sm text-slate-500 mr-2">Seite {{ seite }} von {{ gesamt_seiten }}</span>
    <span class="sm:hidden sr-only">Seite {{ seite }} von {{ gesamt_seiten }}</span>
    {% set von = [seite - 2, 1] | max %}
    {% set bis = [seite + 2, gesamt_seiten] | min %}
    {% if von > 1 %}
    <a href="{{ seiten_url(1) }}"
       class="px-3 py-2 rounded-lg border border-slate-300 text-sm text-slate-700 hover:bg-slate-50">1</a>
    {% if von > 2 %}<span class="px-1 text-slate-400" aria-hidden="true">&hellip;</span>{% endif %}
    {% endif %}
    {% for nr in range(von, bis + 1) %}
    {% if nr == seite %}
    <span aria-current="page"
          class="px-3 py-2 rounded-lg bg-emerald-600 text-white text-sm font-semibold">{{ nr }}</span>
    {% else %}
    <a href="{{ seiten_url(nr) }}"
       class="px-3 py-2 rounded-lg border border-slate-300 text-sm text-slate-700 hover:bg-slate-50">{{ nr }}</a>
    {% endif %}
    {% endfor %}
    {% if bis < gesamt_seiten %}
    {% if bis < gesamt_seiten - 1 %}<span class="px-1 text-slate-400" aria-hidden="true">&hellip;</span>{% endif %}
    <a href="{{ seiten_url(gesamt_seiten) }}"
       class="px-3 py-2 rounded-lg border border-slate-300 text-sm text-slate-700 hover:bg-slate-50">{{ gesamt_seiten }}</a>
    {% endif %}
  </div>
  <div>
    {% if seite < gesamt_seiten %}
    <a href="{{ seiten_url(seite + 1) }}" rel="next"
       class="inline-flex items-center gap-1 px-3 py-2 rounded-lg border border-slate-300 text-sm font-medium text-slate-700 hover:bg-slate-50">
      Weiter {{ icon_chevron_rechts("h-4 w-4") }}
    </a>
    {% else %}
    <span aria-disabled="true"
          class="inline-flex items-center gap-1 px-3 py-2 rounded-lg border border-slate-200 text-sm font-medium text-slate-300 cursor-not-allowed">
      Weiter {{ icon_chevron_rechts("h-4 w-4") }}
    </span>
    {% endif %}
  </div>
</nav>
{% endif %}
{% endmacro %}