{# The consent question, rendered by the server and answered by a form.

   No JavaScript: the public pages run with script-src 'none' by default, and a banner that needs
   a script would be the one thing that breaks that. Accepting and refusing are the same kind of
   button, next to each other, with the same weight - a refusal hidden behind a link would not be
   a free choice. The per-group selection sits in a disclosure so the first view stays readable.

   Anordnung, Form, Farben und Ueberschrift kommen aus den Einstellungen: die Anordnung als
   Klasse, der Rest als Variablen im Kopf der Seite (Consent::styles). #}
<section class="consent-bar consent-layout-{{ consent.layout|default('karte') }}" role="region" aria-labelledby="consent-heading">
    <div class="consent-body">
        <h2 id="consent-heading"><svg class="consent-icon" viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 3 5 6v6c0 4.4 2.9 7.9 7 9 4.1-1.1 7-4.6 7-9V6Zm-2.5 9 2 2 4-4.5"/></svg><span>{{ consent.title|default('') ?: 'Externe Inhalte und Einwilligung'|kant_t }}</span></h2>
        <p>{{ consent.text ?: 'Diese Website lädt bestimmte Inhalte erst, wenn du zustimmst. Ohne Zustimmung wird die Seite vollständig angezeigt, nur eingebettete Inhalte anderer Anbieter bleiben leer.'|kant_t }}</p>
    </div>
    <form method="post" action="{{ path('consent_save') }}" class="consent-form">
        <input type="hidden" name="back" value="{{ back }}">
        <div class="consent-actions">
            <button class="consent-button consent-accept" type="submit" name="choice" value="all">{{ 'Alle akzeptieren'|kant_t }}</button>
            <button class="consent-button consent-decline" type="submit" name="choice" value="none">{{ 'Nur notwendige'|kant_t }}</button>
        </div>
        {# Eine Zeile: links die Einzelwahl, rechts die Rechtslinks. Aufgeklappt nimmt die
           Einzelwahl die ganze Breite, die Links rutschen darunter. #}
        <div class="consent-foot">
        <details class="consent-details">
            <summary>{{ 'Einzeln wählen'|kant_t }}</summary>
            <ul class="consent-groups">
                {% for group in consent.groups %}
                <li>
                    <label for="consent-{{ group.key }}">
                        <input id="consent-{{ group.key }}" type="checkbox" name="groups[]" value="{{ group.key }}"{{ group.granted ? ' checked' : '' }}>
                        <span><strong>{{ group.name|kant_t }}</strong> {{ group.help|kant_t }}</span>
                    </label>
                </li>
                {% endfor %}
            </ul>
            <button class="consent-button consent-choice" type="submit" name="choice" value="some">{{ 'Auswahl speichern'|kant_t }}</button>
        </details>
        {% if consent.privacyPath or consent.imprintPath %}
        <p class="consent-links">
            {% if consent.privacyPath %}<a href="/{{ consent.privacyPath }}">{{ 'Datenschutz'|kant_t }}</a>{% endif %}
            {% if consent.imprintPath %}<a href="/{{ consent.imprintPath }}">{{ 'Impressum'|kant_t }}</a>{% endif %}
        </p>
        {% endif %}
        </div>
    </form>
</section>