{# Das Meldeformular am QR-Aushang. Die EINZIGE Seite des Portals mit Skript
   (`_FORMULAR_SKRIPT`, per Hash belegt); der Wizard laeuft im Browser ueber
   `.aus`-Klassen, nie ueber `style.display` — ein Stilattribut haette
   'unsafe-inline' erzwungen.

   Seit Etappe 2 im Einzelseiten-Grundriss, schmal. Der Assistent bleibt
   Element fuer Element, wie das Skript ihn kennt: dieselben Kennungen,
   `data-*`, `.karte`, `.chip`, `.aus`, `.drop`, `.dateien`. Neu sind nur
   die Huellen: Jeder Schritt ist eine Karte (`.schritt`, nicht `kasten`:
   das Makro setzt keine Kennung, und das Skript blendet die Schritte ueber
   ihre Kennung ein und aus), die Beschriftungen kommen aus `bausatz.feld`,
   der Hauptknopf aus `bausatz.knopf` (das Skript liest `#senden`); in
   Schritt 3 stehen seit U32 zwei `bausatz.kasten` (Problem, Erreichbarkeit),
   das Formular darum trägt keine eigene Kante mehr; und der
   Fehlerkasten ist eine Gefahrmeldung des Bausatzes.

   Die Beschriftung der Fotos ist ein `<span class="feld">`, kein `<label>`:
   Sie zeigt auf kein einzelnes Feld, und ein `label` ohne `for` waere eine
   leere Zusage an die Hilfstechnik.

   Leerraum ist hier NICHT frei: Zwischen Beschriftung und Feld, zwischen
   den Karten und um `<strong>` herum stehen Inline-Elemente, und der
   Baumvergleich haelt jeden Abstand fest. Die Schleifen tragen Minuszeichen,
   damit sie keinen Abstand hinzufuegen. #}
{% import "bausteine/bausatz.html" as b %}
<div class="titelkopf"><div><p class="ueber">{{ liegenschaft_name }}</p><h1>Meldung erfassen</h1></div></div>
{% if begruessung %}<p>{{ begruessung }}</p>{% endif %}
{#- Der QR-Weg je Anlage (Block 2.8). **Ohne Anlage steht hier gar nichts** —
    das gewöhnliche Formular bleibt Zeichen für Zeichen dasselbe, und wer
    eine fremde Kennung ausprobiert, erfährt daran nichts (Spec 8.2). -#}
{% if anlage %}<p class="anlagenzeile">Störung an <strong>{{ anlage.name }}</strong> ({{ anlage.nummer }})</p>{% endif %}
{#- Die Weiche für die Verwaltung. **Ohne Adresse entfällt die Zeile**,
    statt einen toten Verweis zu zeigen (Spec 8.3). Das Portal kennt die
    Backoffice-Adresse nicht von selbst; sie kommt über den
    Kontext-Endpunkt aus der Konfiguration der API. -#}
{% if anlage and backoffice_url %}{% set weiche_ziel = backoffice_url.rstrip("/") ~ "/anlagen/" ~ anlage.id|pfadteil %}<p class="weiche hinweis">Gehören Sie zur Verwaltung? <a href="{{ weiche_ziel }}">Anlage im Backoffice öffnen</a>.</p>{% endif %}

{#- Die Meldungskategorie, die die Anlage am QR-Weg vorgibt (Kriterien 8
    und 9, 21.10.2026). **Die Startlage steht hier im HTML**, als Klasse
    `.aus` und als `data-vorgabe`: Das Skript ist eine Konstante, über die
    der Hash der Sicherheitsrichtlinie gebildet wird, und liest die Werte
    beim Laden nur ab (`startlageLesen`). Mit Vorgabe stehen die Chips und
    das Formular schon offen, «ändern» führt zur Kartenwahl wie sonst. Ohne
    Anlage ist `vorgabe` leer und `ohne_moeglich` falsch: Dann bleibt die
    Seite Zeichen für Zeichen das gewöhnliche Formular. -#}
{%- set vorgabe = anlage.get('kategorie_vorgabe') if anlage else None -%}
{%- set ohne_moeglich = anlage and not vorgabe -%}
<div id="chip-kategorie" class="chip{% if not vorgabe %} aus{% endif %}"{% if vorgabe %} data-vorgabe="{{ vorgabe.haupt.id }}"{% endif %}>
  <span>Kategorie: <strong id="chip-kategorie-name"{% if ohne_moeglich %} data-ohne="keine Angabe"{% endif %}>{% if vorgabe %}{{ vorgabe.haupt.name }}{% endif %}</strong></span>
  <button type="button" id="chip-kategorie-aendern">ändern</button>
</div>
<div id="chip-unter" class="chip{% if not (vorgabe and vorgabe.unter) %} aus{% endif %}"{% if vorgabe and vorgabe.unter %} data-vorgabe="{{ vorgabe.unter.id }}"{% endif %}>
  <span>Genauer: <strong id="chip-unter-name">{% if vorgabe and vorgabe.unter %}{{ vorgabe.unter.name }}{% endif %}</strong></span>
  <button type="button" id="chip-unter-aendern">ändern</button>
</div>

<div id="schritt-kategorie" class="schritt{% if vorgabe %} aus{% endif %}">
  <h2>Was möchten Sie melden?</h2>
  <div class="karten">
{%- for k in kategorien -%}
{# Die Kategoriefarbe steht als Regel im Stilblock (siehe `_kategorie_stil`),
   nicht als Stilattribut. Ohne eigene Farbe bekommt die Karte gar keine Regel
   und erbt die Marke ueber den Rueckfall var(--f, var(--marke-primaer)). #}
<button type="button" class="karte{% if (k.get('farbe') or '')|upper == '#D32F2F' %} rot{% endif %}" data-kategorie="{{ k.id }}" data-name="{{ k.name }}" data-unter="{{ 'true' if k.unter else 'false' }}">{{ icon(k.get('icon'), k.get('farbe')) }}<span class='kname'>{{ k.name }}</span></button>
{%- endfor -%}
</div>
{%- if ohne_moeglich %}
  {{ b.knopf("Ohne Kategorie weiter", "zweit", typ="button", id="ohne-kategorie", klasse="breit") }}
{%- endif %}
</div>

<div id="schritt-unter" class="schritt aus">
  <h2>Bitte spezifizieren</h2>
  {% for k in kategorien %}{% if k.unter %}<div class='unterblock karten{% if not (vorgabe and vorgabe.unter and vorgabe.haupt.id == k.id) %} aus{% endif %}' data-haupt='{{ k.id }}'>
{%- for u in k.unter -%}
{#- Die Unterkarte zeigt ihr eigenes Symbol in der Farbe ihrer
    Hauptkategorie (Produktentscheid 20.10.2026, U28: Farbe bleibt an der
    Hauptkategorie). Ohne eigenes Symbol das der Hauptkategorie, wie im
    Plan (Entscheid 6): Eine Karte ohne Bild stünde zwischen Karten mit
    Bild wie ein Fehler. -#}
<button type="button" class="karte" data-unterkategorie="{{ u.id }}" data-name="{{ u.name }}">{{ icon(u.get('icon') or k.get('icon'), k.get('farbe')) }}<span class='kname'>{{ u.name }}</span></button>
{%- endfor -%}
</div>{% endif %}{% endfor %}
</div>

<form id="schritt-formular" class="schritt{% if not vorgabe %} aus{% endif %}">
  {% call b.kasten("Beschreiben Sie das Problem") %}
  {% call b.feld("Kurzbeschreibung", "titel") %}<input type="text" id="titel" required maxlength="300" autocomplete="off">{% endcall %}
  {% call b.feld("Detailbeschreibung", "beschreibung", "(freiwillig)") %}<textarea id="beschreibung" rows="3"></textarea>{% endcall %}
  <span class="feld">Fotos &amp; Anhänge <span class="zusatz">(freiwillig)</span></span>
  <div class="drop" id="drop-fotos">Foto oder Datei hierher ziehen oder klicken</div>
  <input type="file" id="eingabe-fotos" multiple class="aus">
  <div class="dateien" id="dateien"></div>
  {% endcall %}
  {% call b.kasten("So erreichen wir Sie") %}
  {% call b.feld("Ihr Name", "name") %}<input type="text" id="name" required maxlength="200" autocomplete="name">{% endcall %}
  {% call b.feld("Ihre E-Mail", "email") %}<input type="email" id="email" required autocomplete="email">{% endcall %}
  {% call b.feld("Telefon", "telefon", "(freiwillig)") %}<input type="tel" id="telefon" maxlength="50" autocomplete="tel">{% endcall %}
  {% endcall %}
  <div class="meldung t-gefahr aus" id="formfehler"></div>
  {{ b.knopf("Meldung absenden", "haupt", id="senden", klasse="breit") }}
</form>