{% import "bausteine/bausatz.html" as b %}
{# Das Meldeformular fuer angemeldete Bewohner — auf EINER Seite.

   **Nicht das Formular vom Aushang.** Das fuehrt in Schritten durch
   Kategoriekarten und braucht dafuer Skript; der Bewohnerbereich ist
   skriptfrei. Statt Karten eine Auswahlliste, statt Schritten eine Seite.

   Fuer die Zielgruppe ist das kein Rueckschritt, sondern der bessere Weg:
   Wer 70 ist und im Treppenhaus steht, kommt mit einem Formular, das er ganz
   sieht, schneller durch als mit einem, das sich unter ihm veraendert. Und
   eine Vorlesesoftware liest eine Auswahlliste, wo sie bei Kartenkacheln
   raten muss.

   **Name und Adresse stehen NICHT im Formular.** Sie kommen serverseitig aus
   der Sitzung. Ein Feld dafuer waere die Einladung, eine fremde Angabe
   einzutragen — obwohl eine gepruefte vorliegt.

   Die eingegebenen Werte reisen bei einem Fehler zurueck: Ein Formular, das
   sich bei einem Fehler leert, ist der zuverlaessigste Weg, jemanden zum
   Aufgeben zu bringen. #}

<p><a href="/b/meldungen">← Zurück zu meinen Meldungen</a></p>
{#- `h1` wie auf jeder Seite des Anwendungs-Grundrisses (2026-09-04). -#}
<h1>Neue Meldung</h1>
<p class="unterzeile">Für {{ liegenschaft }}</p>
{#- **Das Formular steht in einem Kasten** (Vorgabe des Auftraggebers, 05.09.2026: «es
    sieht strukturlos aus. Das muss optisch ansprechend und klar getrennt
    sein»). Vorher lagen Felder, Knopf und Hinweis lose auf dem Seitengrund,
    und die Eingabefelder liefen auf einem 1440er Schirm über 1170 px —
    eine Zeile, in der man den Anfang nicht mehr sieht, wenn man am Ende
    tippt.

    Der Kasten heisst «Ihre Angaben» und nicht «Neue Meldung»: Der Titel
    steht als `h1` darüber, und zweimal derselbe Text wäre eine Überschrift
    zu viel — dieselbe Überlegung wie bei den Eckwerten der Dokumentseite. -#}
<div class="formularseite">
{%- call b.kasten("Ihre Angaben", klasse="bereichskarte", icon="werkzeug") %}
{{ kasten }}
<form method="post" enctype="multipart/form-data" action="/b/melden">
  {% call b.feld("Worum geht es?", "m-titel") %}<input type="text" id="m-titel" name="titel" required maxlength="300"
         value="{{ titel }}"
         placeholder="Heizung im Treppenhaus bleibt kalt">{% endcall %}
  {#- **Eine Gruppe je Hauptkategorie**, darin die Unterpunkte (26.10.2026):
      Die Kopfzeilen ersetzen die Kartenwahl des Aushangs, ohne Skript.
      Eine Hauptkategorie ohne Unterpunkt steht als eigene Option da, weil
      sich eine Gruppenüberschrift nicht anwählen lässt. -#}
  {% call b.feld("Art der Meldung", "m-kategorie", "(freiwillig)") %}<select id="m-kategorie" name="kategorie"><option value="">— bitte wählen —</option>{% for k in kategorien %}{% if k.get('unter') %}<optgroup label="{{ k.get('name', '') }}">{% for u in k.get('unter') %}<option value="{{ u.get('id', '') }}"{% if (u.get('id', ''))|string == kategorie %} selected{% endif %}>{{ u.get('name', '') }}</option>{% endfor %}</optgroup>{% else %}<option value="{{ k.get('id', '') }}"{% if (k.get('id', ''))|string == kategorie %} selected{% endif %}>{{ k.get('name', '') }}</option>{% endif %}{% endfor %}</select>{% endcall %}
  {% call b.feld("Beschreibung", "m-text", "(freiwillig)") %}<textarea id="m-text" name="beschreibung" rows="6" maxlength="10000"
            placeholder="Seit wann? Wo genau? Was ist Ihnen aufgefallen?"
            >{{ beschreibung }}</textarea>{% endcall %}
  {% include "bausteine/formathilfe.html" %}
  {#- **Die Datei gehört ins Erfassungsformular**, nicht erst in die
      Antwort (Auftraggeber, 04.09.2026: «Beim Erfassen einer Meldung kann ich keine
      Dateien anhängen, aber beim Nachverfolgen schon?»). Bis dahin führte
      der Erfolg auf die Meldung, wo man ein Foto nachreichen konnte — das
      war ein zweiter Schritt für etwas, das man beim Melden in der Hand
      hat: Wer den tropfenden Hahn fotografiert, tut es, bevor er tippt.

      **Ein Formular, nicht zwei** — dieselbe Regel wie in der Antwort: Im
      Auftragnehmerportal standen Rückmeldung und Datei getrennt
      untereinander, sahen aus wie ein Formular, und das Foto blieb im nicht
      gedrückten liegen (sieben Rückmeldungen, null Uploads). -#}
  {% call b.feld("Foto oder Datei", "m-datei", "(freiwillig, höchstens " ~ max_mb ~ " MB)") %}<input type="file" id="m-datei" name="datei" accept="image/*,.pdf">{% endcall %}
  {{ b.knopf("Meldung absenden", "haupt", klasse="breit") }}
</form>
{%- endcall %}
{#- Der Schlusssatz gehört zur Seite, nicht ins Formular — steht aber
    innerhalb derselben Breite: Seine Trennlinie lief sonst über den ganzen
    Schirm, während der Kasten darüber bei 44 rem endete. -#}
<p class="hinweis">Ihre Verwaltung sieht die Meldung sofort. Sie bekommen
eine Bestätigung per E-Mail und können den Stand hier im Portal verfolgen.</p>
</div>