{# Der Nachrichtenstrang einer Meldung: Filter, zeitliche Folge, ältere am
   Telefon eingeklappt.

   **Eine Vorlage für beide Türen.** Bis zum 10.09.2026 gab es den Strang
   zweimal: Die Verfolgungsseite band `bausteine/verlauf.html` ein, das
   Bewohnerportal setzte ihn in Python zusammen (`_kommentar_html`) und
   reichte fertiges Markup durch. Der Eintrag selbst
   (`bausteine/kommentar.html`) war schon geteilt, die Hülle darum nicht —
   und genau in die Hülle gehören Reihenfolge, Schwelle und Filter.
   Zweimal gebaut hiesse: einmal vergessen.

   Erwartet im Kontext:

   - `verlauf_aeltere` — die eingeklappten, in zeitlicher Folge
   - `verlauf_jung` — die offenen, in zeitlicher Folge, die neueste zuletzt
   - `verlauf_treffer` — wie viele der Filter übrig gelassen hat
   - `verlauf_gesamt` — wie viele es OHNE Filter sind
   - `verlauf_wort` — wonach gefiltert wurde, oder leer
   - `verlauf_ziel` — Pfad für das Filterformular (GET)
   - dazu `statusklasse`, `status_text`, `datum`, `ton` für den Eintrag

   **Die Reihenfolge ist zeitlich, das Neueste unten.** Der erste Entwurf
   drehte sie um; der Auftraggeber hat sie am gebauten Stand zurückgenommen: «In der
   Desktopansicht ist das mit Scrollen die bessere Option. Auch mit dem
   Lesen und unten schreiben.» Die Begründung steht bei
   `_verlauf_aufbereiten`.

   **Das Klappelement steht darum OBEN**, vor den offenen Nachrichten: Was
   eingeklappt wird, ist das Ältere. Das ist die Bauform jedes Chats am
   Telefon, und sie hält den Lesefluss ein.

   **Der Filter ist ein GET und kein Skript.** Das Bewohnerportal fährt eine
   CSP mit Skript-Hashes, und diese Seite bringt heute kein Skript mit.

   **`<details>` und kein eigener Klappmechanismus.** Es klappt auf UND
   wieder zu (Vorgabe des Auftraggebers, 10.09.2026), braucht kein Skript, und am
   Schreibtisch klappt `portal.css` es ganz auf: Dort ist Scrollen der
   bessere Weg, und ein Klick davor wäre einer ohne Gewinn. #}
{% import "bausteine/bausatz.html" as b %}
{% if verlauf_gesamt > 5 or verlauf_wort %}
{#- Der Filter erscheint erst, wenn es etwas zu filtern gibt. Ein Suchfeld
    über drei Nachrichten ist Beiwerk, das den Blick vom Inhalt wegzieht.
    Die Zahl steht bewusst hier und nicht als `VERLAUF_OFFEN`: Ob ein
    Suchfeld lohnt, ist eine andere Frage als, wie viele offen stehen. -#}
<form class="verlauf-filter" method="get" action="{{ verlauf_ziel|ziel }}">
  <label class="feld" for="im-verlauf">Im Gespräch suchen</label>
  <input type="search" id="im-verlauf" name="im_verlauf" maxlength="120"
         value="{{ verlauf_wort }}" placeholder="Wort oder Name">
  {{ b.knopf("Suchen", "zweit") }}
  {%- if verlauf_wort %}<a class="knopf still" href="{{ verlauf_ziel|ziel }}">Filter aufheben</a>{% endif %}
</form>
{% endif %}
{% if verlauf_wort %}
<p class="unterzeile">
  {%- if verlauf_treffer -%}
  {{ verlauf_treffer }} von {{ verlauf_gesamt }} Nachrichten enthalten «{{ verlauf_wort }}».
  {%- else -%}
  Keine der {{ verlauf_gesamt }} Nachrichten enthält «{{ verlauf_wort }}».
  {%- endif -%}
</p>
{% endif %}
{#- **Der Scrollbereich umschliesst BEIDE Teile.** Am Schreibtisch ist er
    ein Kasten mit eigener Bildlaufleiste (`portal.css`), am Telefon tut er
    nichts und das Klappelement übernimmt. Ein zweiter Behälter je Teil
    hätte zwei Bildlaufleisten nebeneinander ergeben.

    Die drei Fälle stehen als EINE Verzweigung da und nicht als drei
    verschachtelte: Ein erster Anlauf schloss das `</div>` in jedem Zweig
    einzeln, und eine Vorlage, in der ein Behälter an drei Stellen zugeht,
    ist beim nächsten Zweig kaputt. -#}
{% if verlauf_aeltere or verlauf_jung %}
{#- **Der Kasten hat GENAU EIN Kind, und das ist der Trick.** Er selbst
    steht auf `column-reverse` (`portal.css`); ein Scrollbereich in dieser
    Richtung öffnet unten statt oben, und genau das hat der Auftraggeber am 10.09.2026
    verlangt: «Die Nachrichten im Nutzerportal soll automatisch nach unten
    scrollen.»

    Mit nur einem Kind dreht `column-reverse` nichts um: Die Reihenfolge im
    DOM bleibt zeitlich, und damit auch die Lesereihenfolge für
    Bildschirmleser. Der naheliegende Weg — alle Einträge umgekehrt
    einsetzen — hätte dieselbe Bildlaufposition ergeben und die
    Vorlesereihenfolge verdreht.

    Nachgemessen mit Chromium 148: DOM 1..8, Anzeige 1..8, sichtbar beim
    Öffnen 6,7,8. Ohne Skript, also ohne Eingriff in die CSP. -#}
<div class="verlauf-kasten"><div class="verlauf-inhalt">
  {%- if verlauf_aeltere %}
  <details class="aeltere">
    <summary>{{ verlauf_aeltere|length }} ältere {{ "Nachricht" if verlauf_aeltere|length == 1 else "Nachrichten" }}</summary>
    <div class="strang">{% for k in verlauf_aeltere %}{% include "bausteine/kommentar.html" %}{% endfor %}</div>
  </details>
  {%- endif %}
  {%- if verlauf_jung %}
  <div class="strang">{% for k in verlauf_jung %}{% include "bausteine/kommentar.html" %}{% endfor %}</div>
  {%- endif %}
</div></div>
{% elif verlauf_wort %}
{#- **Ein eigener Leerzustand, nicht der des leeren Verlaufs.** «Zu dieser
    Meldung gibt es noch keinen Eintrag» nach einer erfolglosen Suche hiesse,
    die Nachrichten seien weg. Der Bausatz hat für diesen Fall die Art
    «filter», und es gibt einen Wächter darauf. -#}
{{ b.leerzustand("filter", "Keine Nachricht enthält dieses Wort.",
   hinweis="Das Gespräch ist vollständig da — der Filter blendet nur aus."
           + (" Zustandswechsel durchsucht er nicht; sie stehen unter «Was bisher geschah»."
              if statusverlauf else ""),
   aktion_href=verlauf_ziel, aktion_wort="Filter aufheben") }}
{% else %}
{#- **Der Satz spricht nur noch vom Gespräch.** Er nannte bis zum
    10.09.2026 auch den Stand — und stand damit ab der Trennung im
    Widerspruch zur Statusgeschichte daneben, die durchaus Einträge zeigen
    kann (Code-Review desselben Tages). -#}
{{ b.leerzustand("bestand", "Zu dieser Meldung gibt es noch keine Nachricht.",
   hinweis="Sobald die Verwaltung Ihnen schreibt, steht es hier."
           + (" Zustandswechsel finden Sie unter «Was bisher geschah»."
              if statusverlauf else "")) }}
{% endif %}