{% extends "@FerienpassAdmin/layout/base.html.twig" %}
{% trans_default_domain 'admin' %}

{% macro lockchip(text, title) %}
    <span class="inline-flex {{ title|default ? 'cursor-help' }} items-center gap-x-1 rounded-full border border-gray-200 bg-gray-100 px-2.5 py-0.5 text-xs font-semibold text-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400"
          {% if title|default %}title="{{ title }}"{% endif %}>
        <twig:ux:icon name="ph:lock-simple-fill" class="size-3" aria-hidden="true" />
        {{ text }}
    </span>
{% endmacro %}

{% macro period_de(value) %}
    {%- set units = {'hours': 'Stunden', 'days': 'Tage', 'weeks': 'Wochen', 'months': 'Monate', 'years': 'Jahre'} -%}
    {%- set parts = (value|default(''))|split(' ') -%}
    {%- if parts|length == 2 -%}{{ parts[0] }} {{ units[parts[1]]|default(parts[1]) }}{%- else -%}{{ value }}{%- endif -%}
{% endmacro %}

{% block main %}

    {% import _self as ui %}

    {% set sm = system_settings_manager %}
    {% set mm = mail_config_manager %}
    {% set im = integrations_manager %}

    <twig:Admin:PageHeader title="settings.title" subtitle="{{ multi_tenancy_enabled() and current_tenant() ? 'Konfiguration, Integrationen und Stammdaten dieses Mandanten.' : 'Systemweite Konfiguration, Integrationen und Stammdaten.' }}">
        <twig:block name="content">
            {% if multi_tenancy_enabled() and current_tenant() %}
                <p class="mt-1.5 text-sm text-gray-500 dark:text-gray-400">
                    Datenraum <strong class="font-semibold text-gray-900 dark:text-gray-100">{{ current_tenant().name }}</strong>
                    — Einstellungen gelten nur für diesen Mandanten.
                </p>
            {% endif %}
        </twig:block>
    </twig:Admin:PageHeader>

    <nav class="flex gap-x-1 overflow-x-auto border-b border-gray-200 pt-2 dark:border-gray-800" aria-label="System">
        <span class="whitespace-nowrap border-b-2 border-primary-600 px-3 py-2.5 text-sm font-semibold text-primary-600 dark:text-primary-400" aria-current="page">Einstellungen</span>
        <a href="{{ path('admin_accessCodes_index') }}" class="whitespace-nowrap border-b-2 border-transparent px-3 py-2.5 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200">Zugangscodes</a>
        {% if multi_tenancy_enabled() and is_granted('ROLE_GLOBAL_ADMIN') %}
            <a href="{{ path('admin_tenants_index') }}" class="whitespace-nowrap border-b-2 border-transparent px-3 py-2.5 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200">Mandanten</a>
        {% endif %}
    </nav>

    <div class="mt-8 pb-28 lg:flex lg:items-start lg:gap-x-12"
         data-controller="ferienpass--admin-edit"
         data-ferienpass--admin-edit-unsaved-changes-url-value="{{ path('admin_unsaved_changes_modal') }}"
         data-action="input->ferienpass--admin-edit#markDirty change->ferienpass--admin-edit#markDirty beforeunload@window->ferienpass--admin-edit#leavingPage turbo:before-visit@window->ferienpass--admin-edit#leavingPage ferienpass-edit:continue@window->ferienpass--admin-edit#continueWithoutSave ferienpass-edit:close@window->ferienpass--admin-edit#closeUnsavedModal">

        <aside class="hidden w-52 shrink-0 lg:sticky lg:top-6 lg:block">
            <nav class="flex flex-col gap-y-0.5 text-sm">
                {% for anchor, label in {
                    'identitaet': 'Identität',
                    'email': 'E-Mail',
                    'anmeldung': 'Anmeldung',
                    'abmeldung': 'Abmeldung',
                    'erinnerungen': 'Erinnerungen',
                    'zahlungen': 'Zahlungen',
                    'datenschutz': 'Datenschutz',
                    'verantwortliche': 'Verantwortliche Stelle',
                    'sprache': 'Sprache & Darstellung',
                    'integrationen': 'Integrationen',
                    'kategorien': 'Angebotskategorien',
                } %}
                    <a href="#{{ anchor }}" class="rounded-md px-2.5 py-1.5 font-medium text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100">{{ label }}</a>
                {% endfor %}
            </nav>
            {% if multi_tenancy_enabled() %}
                <div class="mt-4 border-t border-gray-200 pt-3 dark:border-gray-800">
                    <a href="#installation" class="block px-2.5 text-sm font-medium text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100">Installation</a>
                    <p class="mt-1 px-2.5 text-xs text-gray-400 dark:text-gray-500">Werte, die für alle Mandanten gelten.</p>
                </div>
            {% endif %}
        </aside>

        <main class="min-w-0 max-w-3xl flex-1">

            {# The save bar lives outside the <form> element, so the form needs
               an id for the submit button's `form` attribute to point at. #}
            {{ form_start(form, {attr: {id: form.vars.id}}) }}

            {% if not form.vars.valid %}
                <twig:Admin:Alert type="error" class="mb-6">
                    <strong class="font-semibold">Bitte beheben Sie die Fehler im Formular.</strong>
                    {{ form_errors(form) }}
                </twig:Admin:Alert>
            {% endif %}

            {# ─── Identität & Erscheinungsbild ─── #}
            <section id="identitaet" class="scroll-mt-24">
                <h3 class="text-base/7 font-semibold text-gray-900 dark:text-white">Identität &amp; Erscheinungsbild</h3>
                <p class="mt-1 max-w-2xl text-sm/6 text-gray-500 dark:text-gray-400">Wie der Mandant in der Verwaltung, in E-Mails und im öffentlichen Bereich auftritt.</p>

                <div class="mt-4 divide-y divide-gray-200 border-t border-gray-200 dark:divide-gray-800 dark:border-gray-800">

                    <div class="grid gap-x-8 gap-y-2 py-5 sm:grid-cols-[280px_minmax(0,1fr)]">
                        <div>
                            <label for="{{ form.pageTitle.vars.id }}" class="text-sm font-semibold text-gray-900 dark:text-gray-100">Seitentitel</label>
                            <p class="mt-1 text-xs/5 text-gray-500 dark:text-gray-400">Suffix im Browser-Tab der Verwaltung. Pflichtfeld.</p>
                        </div>
                        <div class="sm:max-w-sm">
                            {{ form_errors(form.pageTitle) }}
                            {{ form_widget(form.pageTitle) }}
                            <p class="mt-1.5 text-xs text-gray-400 dark:text-gray-500">max. 255 Zeichen</p>
                        </div>
                    </div>

                    <div class="grid gap-x-8 gap-y-2 py-5 sm:grid-cols-[280px_minmax(0,1fr)]">
                        <div>
                            <span class="text-sm font-semibold text-gray-900 dark:text-gray-100">Logo</span>
                            <p class="mt-1 text-xs/5 text-gray-500 dark:text-gray-400">JPG, PNG oder WebP, max. 1&nbsp;MB. SVG ist nicht zulässig, da die Datei jede Empfängerin erreicht.</p>
                        </div>
                        <div class="min-w-0">
                            {{ component('Admin:Settings:LogoUpload', {config: config}) }}
                        </div>
                    </div>

                    <div class="grid gap-x-8 gap-y-2 py-5 sm:grid-cols-[280px_minmax(0,1fr)]">
                        <div>
                            <label for="{{ form.colorPrimary.vars.id }}" class="text-sm font-semibold text-gray-900 dark:text-gray-100">Primärfarbe</label>
                            <p class="mt-1 text-xs/5 text-gray-500 dark:text-gray-400">Die Abstufungen 50–900 werden daraus zur Laufzeit berechnet.</p>
                        </div>
                        <div>
                            {{ form_errors(form.colorPrimary) }}
                            <div class="flex flex-wrap items-center gap-3">
                                <div class="w-32">{{ form_widget(form.colorPrimary) }}</div>
                                {% set brandColor = config.colorPrimary|default('#1c6b9c') %}
                                <div class="flex overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700" aria-hidden="true">
                                    {% for step in [['white', 88], ['white', 74], ['white', 34], [null, 0], ['black', 22], ['black', 52]] %}
                                        <span class="size-7" style="background: {{ step[0] ? "color-mix(in oklab, #{brandColor} #{100 - step[1]}%, #{step[0]})" : brandColor }}"></span>
                                    {% endfor %}
                                </div>
                            </div>
                            <p class="mt-1.5 text-xs text-gray-400 dark:text-gray-500">Die Vorschau zeigt den gespeicherten Wert.</p>
                        </div>
                    </div>

                </div>
            </section>

            {# ─── E-Mail-Absender ─── #}
            <section id="email" class="mt-12 scroll-mt-24">
                <h3 class="text-base/7 font-semibold text-gray-900 dark:text-white">E-Mail-Absender</h3>
                <p class="mt-1 max-w-2xl text-sm/6 text-gray-500 dark:text-gray-400">Alle Systemmails laufen über ein zentrales Postfach der Installation. Die Absender-Identität {{ multi_tenancy_enabled() ? 'legt jeder Mandant selbst fest' : 'legen Sie hier fest' }}.</p>

                <div class="mt-4 divide-y divide-gray-200 border-t border-gray-200 dark:divide-gray-800 dark:border-gray-800">

                    <div class="grid gap-x-8 gap-y-2 py-5 sm:grid-cols-[280px_minmax(0,1fr)]">
                        <div>
                            <span class="text-sm font-semibold text-gray-900 dark:text-gray-100">Absenderadresse</span>
                            <p class="mt-1 text-xs/5 text-gray-500 dark:text-gray-400">Pflichtfeld. Steht als Absender auf jeder Systemmail.</p>
                        </div>
                        {% if form.adminEmail is defined %}
                            <div class="sm:max-w-sm">
                                {{ form_errors(form.adminEmail) }}
                                {{ form_widget(form.adminEmail) }}
                            </div>
                        {% else %}
                            <div class="flex flex-wrap items-center gap-x-3 gap-y-1 sm:pt-1">
                                <span class="font-mono text-sm font-semibold text-gray-900 dark:text-gray-100">{{ mm.adminEmail }}</span>
                                {{ ui.lockchip('Konfiguration', 'In der Deployment-Konfiguration festgelegt und hier nicht änderbar.') }}
                            </div>
                        {% endif %}
                    </div>

                    <div class="grid gap-x-8 gap-y-2 py-5 sm:grid-cols-[280px_minmax(0,1fr)]">
                        <div>
                            <label for="{{ form.adminEmailName.vars.id }}" class="text-sm font-semibold text-gray-900 dark:text-gray-100">Absendername</label>
                            <p class="mt-1 text-xs/5 text-gray-500 dark:text-gray-400">Leer: Empfängerinnen sehen nur die Adresse.</p>
                        </div>
                        <div class="sm:max-w-sm">
                            {{ form_errors(form.adminEmailName) }}
                            {{ form_widget(form.adminEmailName) }}
                        </div>
                    </div>

                    <div class="grid gap-x-8 gap-y-2 py-5 sm:grid-cols-[280px_minmax(0,1fr)]">
                        <div>
                            <span class="text-sm font-semibold text-gray-900 dark:text-gray-100">Antwortadresse</span>
                            <p class="mt-1 text-xs/5 text-gray-500 dark:text-gray-400">Leer: Antworten gehen an die Absenderadresse.</p>
                        </div>
                        {% if form.replyToEmail is defined %}
                            <div class="sm:max-w-sm">
                                {{ form_errors(form.replyToEmail) }}
                                {{ form_widget(form.replyToEmail) }}
                            </div>
                        {% else %}
                            <div class="flex flex-wrap items-center gap-x-3 gap-y-1 sm:pt-1">
                                <span class="font-mono text-sm font-semibold text-gray-900 dark:text-gray-100">{{ mm.replyTo|default('—') }}</span>
                                {{ ui.lockchip('Konfiguration', 'In der Deployment-Konfiguration festgelegt und hier nicht änderbar.') }}
                            </div>
                        {% endif %}
                    </div>

                    {% if form.replyToName is defined %}
                        <div class="grid gap-x-8 gap-y-2 py-5 sm:grid-cols-[280px_minmax(0,1fr)]">
                            <div>
                                <label for="{{ form.replyToName.vars.id }}" class="text-sm font-semibold text-gray-900 dark:text-gray-100">Antwortname</label>
                                <p class="mt-1 text-xs/5 text-gray-500 dark:text-gray-400">Leer: Antworten tragen nur die Adresse.</p>
                            </div>
                            <div class="sm:max-w-sm">
                                {{ form_errors(form.replyToName) }}
                                {{ form_widget(form.replyToName) }}
                            </div>
                        </div>
                    {% endif %}

                </div>
            </section>

            {# ─── Anmeldung & Buchung ─── #}
            <section id="anmeldung" class="mt-12 scroll-mt-24">
                <h3 class="text-base/7 font-semibold text-gray-900 dark:text-white">Anmeldung &amp; Buchung</h3>
                <p class="mt-1 max-w-2xl text-sm/6 text-gray-500 dark:text-gray-400">Was Familien bei der Anmeldung angeben müssen und wer bevorzugt einen Platz bekommt.</p>

                <div class="mt-4 divide-y divide-gray-200 border-t border-gray-200 dark:divide-gray-800 dark:border-gray-800">

                    <div class="grid gap-x-8 gap-y-2 py-5 sm:grid-cols-[280px_minmax(0,1fr)]">
                        <div>
                            <span class="text-sm font-semibold text-gray-900 dark:text-gray-100">Freunde-Anmeldung</span>
                            <p class="mt-1 text-xs/5 text-gray-500 dark:text-gray-400">Zwei Kinder buchen über einen gemeinsamen Code und werden zusammen platziert.</p>
                        </div>
                        <div class="sm:pt-1">
                            {% if form.friendsBooking is defined %}
                                {{ form_widget(form.friendsBooking) }}
                            {% else %}
                                <div class="flex items-center gap-x-3"><span class="text-sm font-semibold">{{ sm.isFriendsBooking ? 'Aktiviert' : 'Deaktiviert' }}</span>{{ ui.lockchip('Konfiguration') }}</div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="grid gap-x-8 gap-y-2 py-5 sm:grid-cols-[280px_minmax(0,1fr)]">
                        <div>
                            <span class="text-sm font-semibold text-gray-900 dark:text-gray-100">Postanschrift erforderlich</span>
                            <p class="mt-1 text-xs/5 text-gray-500 dark:text-gray-400">Macht die Anschrift in der Anmeldung zur Pflicht.</p>
                        </div>
                        <div class="sm:pt-1">
                            {% if form.requirePostalAddress is defined %}
                                {{ form_widget(form.requirePostalAddress) }}
                            {% else %}
                                <div class="flex items-center gap-x-3"><span class="text-sm font-semibold">{{ sm.isRequirePostalAddress ? 'Ja' : 'Nein' }}</span>{{ ui.lockchip('Konfiguration') }}</div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="grid gap-x-8 gap-y-2 py-5 sm:grid-cols-[280px_minmax(0,1fr)]">
                        <div>
                            <span class="text-sm font-semibold text-gray-900 dark:text-gray-100">Bevorzugte Postleitzahlen</span>
                            <p class="mt-1 text-xs/5 text-gray-500 dark:text-gray-400">Gelten als ortsansässig und werden bei der Platzvergabe vorgezogen. Mehrere durch Komma trennen; leer: niemand wird vorgezogen.</p>
                        </div>
                        {% if form.preferredPostalCodes is defined %}
                            <div class="sm:max-w-sm">
                                {{ form_errors(form.preferredPostalCodes) }}
                                {{ form_widget(form.preferredPostalCodes) }}
                            </div>
                        {% else %}
                            <div class="flex flex-wrap items-center gap-x-3 gap-y-1 sm:pt-1">
                                <span class="font-mono text-sm font-semibold text-gray-900 dark:text-gray-100">{{ sm.preferredPostalCodes|default('—') }}</span>
                                {{ ui.lockchip('Konfiguration') }}
                            </div>
                        {% endif %}
                    </div>

                    <div class="grid gap-x-8 gap-y-2 py-5 sm:grid-cols-[280px_minmax(0,1fr)]">
                        <div>
                            <span class="text-sm font-semibold text-gray-900 dark:text-gray-100">Alterstoleranz</span>
                            <p class="mt-1 text-xs/5 text-gray-500 dark:text-gray-400">Weitet die Altersspanne an beiden Rändern, damit ein Kind mit Geburtstag kurz nach der Freizeit noch teilnehmen darf. Leer: Altersgrenzen gelten exakt.</p>
                        </div>
                        {% if form.ageTolerance is defined %}
                            <div>{{ form_errors(form.ageTolerance) }}{{ form_widget(form.ageTolerance) }}</div>
                        {% else %}
                            <div class="flex flex-wrap items-center gap-x-3 gap-y-1 sm:pt-1">
                                <span class="text-sm font-semibold">{{ sm.ageTolerance ? ui.period_de(sm.ageTolerance) : 'nicht gesetzt' }}</span>
                                {{ ui.lockchip('Konfiguration') }}
                            </div>
                        {% endif %}
                    </div>

                </div>
            </section>

            {# ─── Abmeldung ─── #}
            <section id="abmeldung" class="mt-12 scroll-mt-24">
                <h3 class="text-base/7 font-semibold text-gray-900 dark:text-white">Abmeldung</h3>
                <p class="mt-1 max-w-2xl text-sm/6 text-gray-500 dark:text-gray-400">Drei Regeln, die zusammen ergeben, bis wann eine Familie eine Buchung zurückgeben kann.</p>

                {% set grace = sm.withdrawGracePeriod %}
                <div class="mt-3 flex max-w-2xl items-start gap-x-2.5 rounded-lg border border-blue-200 bg-blue-50 px-4 py-3 text-sm text-blue-900 dark:border-blue-400/20 dark:bg-blue-400/10 dark:text-blue-200">
                    <span class="mt-0.5 size-4 shrink-0 text-blue-500"><twig:ux:icon name="ph:info"/></span>
                    <p>
                        {% if grace %}
                            Familien können bis <strong class="font-semibold">{{ ui.period_de(grace) }}</strong> vor Beginn kostenfrei abmelden.
                            {% if sm.isNoWithdrawAfterGracePeriod %}Danach ist eine Abmeldung <strong class="font-semibold">nicht mehr möglich</strong>.{% else %}Danach wird die Teilnahme <strong class="font-semibold">berechnet</strong>.{% endif %}
                        {% else %}
                            Eine Abmeldung ist <strong class="font-semibold">immer kostenfrei</strong>, egal wie kurzfristig.
                        {% endif %}
                        {% if sm.isNoWithdrawAfterApplicationDeadline %}
                            Ist die Anmeldung für das Angebot geschlossen, ist eine Abmeldung <strong class="font-semibold">ausgeschlossen</strong> — auch innerhalb der Frist.
                        {% endif %}
                        <span class="text-blue-700/70 dark:text-blue-300/70">Die Zusammenfassung zeigt den gespeicherten Stand.</span>
                    </p>
                </div>

                <div class="mt-4 divide-y divide-gray-200 border-t border-gray-200 dark:divide-gray-800 dark:border-gray-800">

                    <div class="grid gap-x-8 gap-y-2 py-5 sm:grid-cols-[280px_minmax(0,1fr)]">
                        <div>
                            <span class="text-sm font-semibold text-gray-900 dark:text-gray-100">Kostenfrei bis vor Beginn</span>
                            <p class="mt-1 text-xs/5 text-gray-500 dark:text-gray-400">Gnadenfrist. Danach wird die Teilnahme berechnet — oder blockiert, siehe unten. Leer: jede Abmeldung ist kostenfrei.</p>
                        </div>
                        {% if form.withdrawGracePeriod is defined %}
                            <div>{{ form_errors(form.withdrawGracePeriod) }}{{ form_widget(form.withdrawGracePeriod) }}</div>
                        {% else %}
                            <div class="flex flex-wrap items-center gap-x-3 gap-y-1 sm:pt-1">
                                <span class="text-sm font-semibold">{{ grace ? ui.period_de(grace) : 'nicht gesetzt' }}</span>
                                {{ ui.lockchip('Konfiguration') }}
                            </div>
                        {% endif %}
                    </div>

                    <div class="grid gap-x-8 gap-y-2 py-5 sm:grid-cols-[280px_minmax(0,1fr)]">
                        <div>
                            <span class="text-sm font-semibold text-gray-900 dark:text-gray-100">Nach der Frist gar nicht mehr</span>
                            <p class="mt-1 text-xs/5 text-gray-500 dark:text-gray-400">Blockiert die Abmeldung statt sie zu berechnen.</p>
                        </div>
                        <div class="sm:pt-1">
                            {% if form.noWithdrawAfterGracePeriod is defined %}
                                {{ form_widget(form.noWithdrawAfterGracePeriod) }}
                            {% else %}
                                <div class="flex items-center gap-x-3"><span class="text-sm font-semibold">{{ sm.isNoWithdrawAfterGracePeriod ? 'Ja' : 'Nein' }}</span>{{ ui.lockchip('Konfiguration') }}</div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="grid gap-x-8 gap-y-2 py-5 sm:grid-cols-[280px_minmax(0,1fr)]">
                        <div>
                            <span class="text-sm font-semibold text-gray-900 dark:text-gray-100">Nicht nach Anmeldeschluss</span>
                            <p class="mt-1 text-xs/5 text-gray-500 dark:text-gray-400">Sobald die Anmeldung für das Angebot geschlossen ist, ist keine Abmeldung mehr möglich.</p>
                        </div>
                        <div class="sm:pt-1">
                            {% if form.noWithdrawAfterApplicationDeadline is defined %}
                                {{ form_widget(form.noWithdrawAfterApplicationDeadline) }}
                            {% else %}
                                <div class="flex items-center gap-x-3"><span class="text-sm font-semibold">{{ sm.isNoWithdrawAfterApplicationDeadline ? 'Ja' : 'Nein' }}</span>{{ ui.lockchip('Konfiguration') }}</div>
                            {% endif %}
                        </div>
                    </div>

                </div>
            </section>

            {# ─── Erinnerungen ─── #}
            <section id="erinnerungen" class="mt-12 scroll-mt-24">
                <h3 class="text-base/7 font-semibold text-gray-900 dark:text-white">Erinnerungen</h3>
                <p class="mt-1 max-w-2xl text-sm/6 text-gray-500 dark:text-gray-400">Eine Mail vor der Veranstaltung an alle mit bestätigter Buchung.</p>

                <div class="mt-4 divide-y divide-gray-200 border-t border-gray-200 dark:divide-gray-800 dark:border-gray-800">

                    <div class="grid gap-x-8 gap-y-2 py-5 sm:grid-cols-[280px_minmax(0,1fr)]">
                        <div>
                            <span class="text-sm font-semibold text-gray-900 dark:text-gray-100">Erinnerungen versenden</span>
                        </div>
                        <div class="sm:pt-1">
                            {% if form.remindAttendance is defined %}
                                {{ form_widget(form.remindAttendance) }}
                            {% else %}
                                <div class="flex items-center gap-x-3"><span class="text-sm font-semibold">{{ sm.isRemindAttendance ? 'Aktiviert' : 'Deaktiviert' }}</span>{{ ui.lockchip('Konfiguration') }}</div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="grid gap-x-8 gap-y-2 py-5 sm:grid-cols-[280px_minmax(0,1fr)]">
                        <div>
                            <span class="text-sm font-semibold text-gray-900 dark:text-gray-100">Vorlauf</span>
                            <p class="mt-1 text-xs/5 text-gray-500 dark:text-gray-400">Wie früh die Erinnerung rausgeht. Leer: 36 Stunden vorher.</p>
                        </div>
                        {% if form.attendanceRemindPeriod is defined %}
                            <div>{{ form_errors(form.attendanceRemindPeriod) }}{{ form_widget(form.attendanceRemindPeriod) }}</div>
                        {% else %}
                            <div class="flex flex-wrap items-center gap-x-3 gap-y-1 sm:pt-1">
                                <span class="text-sm font-semibold">{{ sm.attendanceRemindPeriod ? ui.period_de(sm.attendanceRemindPeriod) : 'Standard' }}</span>
                                {{ ui.lockchip('Konfiguration') }}
                            </div>
                        {% endif %}
                    </div>

                </div>
            </section>

            {# ─── Zahlungen ─── #}
            <section id="zahlungen" class="mt-12 scroll-mt-24">
                <h3 class="text-base/7 font-semibold text-gray-900 dark:text-white">Zahlungen</h3>
                <p class="mt-1 max-w-2xl text-sm/6 text-gray-500 dark:text-gray-400">Belege, Debitoren und manuelle Zahlungen. Ein eingerichteter Online-Anbieter schaltet den Bereich von selbst frei — der Schalter ist für Mandanten, die Bargeld oder Überweisung ohne Anbieter annehmen.</p>

                <div class="mt-4 divide-y divide-gray-200 border-t border-gray-200 dark:divide-gray-800 dark:border-gray-800">

                    <div class="grid gap-x-8 gap-y-2 py-5 sm:grid-cols-[280px_minmax(0,1fr)]">
                        <div>
                            <span class="text-sm font-semibold text-gray-900 dark:text-gray-100">Zahlungen aktiv</span>
                            <p class="mt-1 text-xs/5 text-gray-500 dark:text-gray-400">Schaltet Belege, Debitoren und manuelle Zahlungen frei — in der Anmeldung, in der Hauptnavigation und im Export.</p>
                        </div>
                        <div class="sm:pt-1">
                            {% if paymentsLockedByProvider %}
                                <div class="flex items-center gap-x-3">
                                    <span class="text-sm font-semibold">Aktiviert</span>
                                    {{ ui.lockchip('durch pmPayment', 'Solange pmPayment eingerichtet ist, bleiben Zahlungen aktiv.') }}
                                </div>
                            {% elseif form.paymentsEnabled is defined %}
                                {{ form_widget(form.paymentsEnabled) }}
                            {% else %}
                                <div class="flex items-center gap-x-3"><span class="text-sm font-semibold">{{ sm.isPaymentsEnabled ? 'Aktiviert' : 'Deaktiviert' }}</span>{{ ui.lockchip('Konfiguration') }}</div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="grid gap-x-8 gap-y-2 py-5 sm:grid-cols-[280px_minmax(0,1fr)]">
                        <div>
                            <span class="text-sm font-semibold text-gray-900 dark:text-gray-100">Zahlungsart wählbar</span>
                            <p class="mt-1 text-xs/5 text-gray-500 dark:text-gray-400">Familien wählen selbst, statt auf ein Verfahren geleitet zu werden.</p>
                        </div>
                        <div class="sm:pt-1">
                            {% if form.paymentAllowSelect is defined %}
                                {{ form_widget(form.paymentAllowSelect) }}
                            {% else %}
                                <div class="flex items-center gap-x-3"><span class="text-sm font-semibold">{{ sm.isPaymentAllowSelect ? 'Ja' : 'Nein' }}</span>{{ ui.lockchip('Konfiguration') }}</div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="grid gap-x-8 gap-y-2 py-5 sm:grid-cols-[280px_minmax(0,1fr)]">
                        <div>
                            <span class="text-sm font-semibold text-gray-900 dark:text-gray-100">Präfix der Belegnummer</span>
                            <p class="mt-1 text-xs/5 text-gray-500 dark:text-gray-400">Buchstaben, Zahlen und - _ / . — max. 20 Zeichen.</p>
                        </div>
                        {% if form.receiptNumberPrefix is defined %}
                            <div class="sm:max-w-48">
                                {{ form_errors(form.receiptNumberPrefix) }}
                                {{ form_widget(form.receiptNumberPrefix) }}
                            </div>
                        {% else %}
                            <div class="flex flex-wrap items-center gap-x-3 gap-y-1 sm:pt-1">
                                <span class="font-mono text-sm font-semibold">{{ sm.receiptNumberPrefix|default('—') }}</span>
                                {{ ui.lockchip('Konfiguration') }}
                            </div>
                        {% endif %}
                    </div>

                </div>

                {% if not sm.isPaymentsEnabled and not paymentsLockedByProvider %}
                    <div class="mt-4 flex max-w-2xl flex-wrap items-center gap-4 rounded-xl border border-dashed border-gray-300 bg-white px-5 py-4 dark:border-gray-700 dark:bg-gray-900">
                        <div class="min-w-0 flex-1">
                            <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Zahlungen sind {{ multi_tenancy_enabled() ? 'für diesen Mandanten' }} ausgeschaltet.</p>
                            <p class="mt-1 text-xs/5 text-gray-500 dark:text-gray-400">Belege, Debitoren, Zahlungsarten und der Bereich Zahlungen in der Hauptnavigation erscheinen erst, wenn Sie sie aktivieren — oder sobald ein Online-Anbieter eingerichtet ist.</p>
                        </div>
                        <a href="{{ path('admin_tools_settings_integration_configure', {integration: 'PmPaymentProvider'}) }}" data-turbo-frame="modal" class="shrink-0 text-sm font-semibold text-primary-600 hover:text-primary-500 dark:text-primary-400">pmPayment einrichten</a>
                    </div>
                {% endif %}
            </section>

            {# ─── Datenschutz & Aufbewahrung ─── #}
            <section id="datenschutz" class="mt-12 scroll-mt-24">
                <h3 class="text-base/7 font-semibold text-gray-900 dark:text-white">Datenschutz &amp; Aufbewahrung</h3>
                <p class="mt-1 max-w-2xl text-sm/6 text-gray-500 dark:text-gray-400">Fristen, nach denen Daten zur Löschung vorgemerkt werden oder Zugriffe enden.</p>

                <div class="mt-4 divide-y divide-gray-200 border-t border-gray-200 dark:divide-gray-800 dark:border-gray-800">

                    <div class="grid gap-x-8 gap-y-2 py-5 sm:grid-cols-[280px_minmax(0,1fr)]">
                        <div>
                            <span class="text-sm font-semibold text-gray-900 dark:text-gray-100">Löschung nach letzter Aktivität</span>
                            <p class="mt-1 text-xs/5 text-gray-500 dark:text-gray-400">Teilnehmende erscheinen danach in der Löschliste.</p>
                        </div>
                        {% if form.eraseDataPeriod is defined %}
                            <div>
                                {{ form_errors(form.eraseDataPeriod) }}
                                {{ form_widget(form.eraseDataPeriod) }}
                                {% if not sm.eraseDataPeriod %}
                                    <p class="mt-1.5 flex items-center gap-x-1.5 text-xs font-medium text-amber-700 dark:text-amber-400">
                                        <twig:ux:icon name="ph:warning" class="size-3.5" aria-hidden="true" />
                                        Leer: es wird niemand zur Löschung vorgemerkt.
                                    </p>
                                {% endif %}
                            </div>
                        {% else %}
                            <div class="flex flex-wrap items-center gap-x-3 gap-y-1 sm:pt-1">
                                <span class="text-sm font-semibold">{{ sm.eraseDataPeriod ? ui.period_de(sm.eraseDataPeriod) : 'nicht gesetzt' }}</span>
                                {{ ui.lockchip('Konfiguration') }}
                            </div>
                        {% endif %}
                    </div>

                    <div class="grid gap-x-8 gap-y-2 py-5 sm:grid-cols-[280px_minmax(0,1fr)]">
                        <div>
                            <span class="text-sm font-semibold text-gray-900 dark:text-gray-100">Veranstalter-Zugriff nach Angebotsende</span>
                            <p class="mt-1 text-xs/5 text-gray-500 dark:text-gray-400">Solange bleibt die Teilnahmeliste für Veranstaltende sichtbar, wenn keine Saison-Aufgabe etwas anderes vorgibt. Leer: 6 Monate.</p>
                        </div>
                        <div>{{ form_errors(form.hostDataRetentionPeriod) }}{{ form_widget(form.hostDataRetentionPeriod) }}</div>
                    </div>

                </div>
            </section>

            {# ─── Verantwortliche Stelle ─── #}
            <section id="verantwortliche" class="mt-12 scroll-mt-24">
                <h3 class="text-base/7 font-semibold text-gray-900 dark:text-white">Verantwortliche Stelle</h3>
                <p class="mt-1 max-w-2xl text-sm/6 text-gray-500 dark:text-gray-400">Erscheint als Pflichtangabe auf der Seite „Datennutzung“ im Nutzerkonto. Eine halb ausgefüllte Adresse ist schlechter als keine.</p>

                <div class="mt-4 grid gap-x-6 gap-y-4 border-t border-gray-200 pt-5 sm:grid-cols-2 dark:border-gray-800">
                    <div class="sm:col-span-2">
                        <label for="{{ form.imprintName.vars.id }}" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-200">Name der Stelle</label>
                        {{ form_widget(form.imprintName) }}
                    </div>
                    <div class="sm:col-span-2">
                        <label for="{{ form.imprintDepartment.vars.id }}" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-200">Abteilung / Zusatz</label>
                        {{ form_widget(form.imprintDepartment) }}
                    </div>
                    <div class="sm:col-span-2">
                        <label for="{{ form.imprintStreet.vars.id }}" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-200">Straße und Hausnummer</label>
                        {{ form_widget(form.imprintStreet) }}
                    </div>
                    <div>
                        <label for="{{ form.imprintPostalCode.vars.id }}" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-200">Postleitzahl</label>
                        {{ form_widget(form.imprintPostalCode) }}
                    </div>
                    <div>
                        <label for="{{ form.imprintCity.vars.id }}" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-200">Ort</label>
                        {{ form_widget(form.imprintCity) }}
                    </div>
                </div>

                {% set imprintMissing = [config.imprintName, config.imprintDepartment, config.imprintStreet, config.imprintPostalCode, config.imprintCity]|filter(v => not v)|length %}
                {% if imprintMissing > 0 and imprintMissing < 5 %}
                    <div class="mt-4 flex max-w-2xl items-start gap-x-2.5 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800 dark:border-amber-400/20 dark:bg-amber-400/10 dark:text-amber-300">
                        <span class="mt-0.5 size-4 shrink-0"><twig:ux:icon name="ph:warning"/></span>
                        <p><strong class="font-semibold">{{ imprintMissing }} von 5 Angaben fehlen.</strong> Die Seite „Datennutzung“ zeigt die Stelle erst, wenn Name, Straße, PLZ und Ort vorliegen.</p>
                    </div>
                {% endif %}
            </section>

            {# ─── Sprache & Darstellung ─── #}
            <section id="sprache" class="mt-12 scroll-mt-24">
                <h3 class="text-base/7 font-semibold text-gray-900 dark:text-white">Sprache &amp; Darstellung</h3>
                <p class="mt-1 max-w-2xl text-sm/6 text-gray-500 dark:text-gray-400">Gilt für die Verwaltung und für alles, was das System an Familien und Veranstaltende ausgibt.</p>

                <div class="mt-4 divide-y divide-gray-200 border-t border-gray-200 dark:divide-gray-800 dark:border-gray-800">

                    <div class="grid gap-x-8 gap-y-2 py-5 sm:grid-cols-[280px_minmax(0,1fr)]">
                        <div><label for="{{ form.language.vars.id }}" class="text-sm font-semibold text-gray-900 dark:text-gray-100">Sprache</label></div>
                        <div class="sm:max-w-64">{{ form_widget(form.language) }}</div>
                    </div>

                    <div class="grid gap-x-8 gap-y-2 py-5 sm:grid-cols-[280px_minmax(0,1fr)]">
                        <div><label for="{{ form.dateFormat.vars.id }}" class="text-sm font-semibold text-gray-900 dark:text-gray-100">Datumsformat</label></div>
                        <div class="sm:max-w-64">{{ form_widget(form.dateFormat) }}</div>
                    </div>

                    <div class="grid gap-x-8 gap-y-2 py-5 sm:grid-cols-[280px_minmax(0,1fr)]">
                        <div><label for="{{ form.timezone.vars.id }}" class="text-sm font-semibold text-gray-900 dark:text-gray-100">Zeitzone</label></div>
                        <div class="sm:max-w-64">{{ form_widget(form.timezone) }}</div>
                    </div>

                    <div class="grid gap-x-8 gap-y-2 py-5 sm:grid-cols-[280px_minmax(0,1fr)]">
                        <div>
                            <span class="text-sm font-semibold text-gray-900 dark:text-gray-100">Sortierung der Teilnahmelisten</span>
                            <p class="mt-1 text-xs/5 text-gray-500 dark:text-gray-400">Wirkt heute nur auf den PDF-Export. Der XLSX-Export sortiert unabhängig davon.</p>
                        </div>
                        {% if form.participantListSort is defined %}
                            <div class="sm:max-w-64">{{ form_widget(form.participantListSort) }}</div>
                        {% else %}
                            <div class="flex items-center gap-x-3 sm:pt-1"><span class="text-sm font-semibold">{{ sm.participantListSort == 'firstname' ? 'Vorname' : 'Nachname' }}</span>{{ ui.lockchip('Konfiguration') }}</div>
                        {% endif %}
                    </div>

                </div>
            </section>

            {{ form_widget(form._token) }}
            {{ form_end(form, {render_rest: false}) }}

            {# ─── Integrationen ─── #}
            <section id="integrationen" class="mt-12 scroll-mt-24">
                <h3 class="text-base/7 font-semibold text-gray-900 dark:text-white">Integrationen</h3>
                <p class="mt-1 max-w-2xl text-sm/6 text-gray-500 dark:text-gray-400">Zugangsdaten liegen verschlüsselt bei {{ multi_tenancy_enabled() ? 'diesem Mandanten' : 'dieser Installation' }}. Ist ein installationsweites Konto gesetzt, hat es Vorrang.</p>

                <div class="mt-4 divide-y divide-gray-200 border-t border-gray-200 dark:divide-gray-800 dark:border-gray-800">
                    {% for integration in [
                        {key: 'PmPaymentProvider', title: 'pmPayment', sub: 'Online-Zahlungen über pmPayment. Schaltet den Bereich Zahlungen frei.', global: null},
                        {key: 'gpt_image_generation', title: 'Bildgenerierung', sub: 'Erzeugt Angebotsbilder aus einem Prompt.', global: im.isOpenAiApiKeyFromEnv ? 'Ein installationsweiter OpenAI-Schlüssel ist gesetzt und hat Vorrang.' : null},
                        {key: 'brevo_sms', title: 'Brevo SMS', sub: 'Versand von Textnachrichten.', global: null},
                    ] %}
                        {% set configured = im.isIntegrationConfigured(integration.key) %}
                        <div class="flex flex-wrap items-start justify-between gap-4 py-5">
                            <div class="min-w-0 flex-1">
                                <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ integration.title }}</p>
                                <p class="mt-1 max-w-xl text-xs/5 text-gray-500 dark:text-gray-400">{{ integration.sub }}</p>
                                {% if integration.global %}
                                    <p class="mt-1.5 flex items-center gap-x-1.5 text-xs text-gray-500 dark:text-gray-400">
                                        <twig:ux:icon name="ph:info" class="size-3.5 shrink-0 text-gray-400" aria-hidden="true" />
                                        {{ integration.global }}
                                    </p>
                                {% endif %}
                            </div>
                            <div class="flex shrink-0 items-center gap-x-3">
                                <twig:Admin:Badge color="{{ configured ? 'green' : 'gray' }}" :dot="true" :boxed="true" content="{{ configured ? 'Konfiguriert' : 'Nicht konfiguriert' }}"/>
                                <a href="{{ path('admin_tools_settings_integration_configure', {integration: integration.key}) }}" data-turbo-frame="modal"
                                   class="text-sm font-semibold text-primary-600 hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300">{{ configured ? 'Zugangsdaten' : 'Einrichten' }}</a>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </section>

            {# ─── Angebotskategorien ─── #}
            <section id="kategorien" class="mt-12 scroll-mt-24">
                <h3 class="text-base/7 font-semibold text-gray-900 dark:text-white">{{ 'offerCategories.title'|trans }}</h3>
                <p class="mt-1 max-w-2xl text-sm/6 text-gray-500 dark:text-gray-400">Hier können Kategorien für die Angebote definiert werden.</p>

                <ul id="offer-categories-list" role="list" class="mt-4 divide-y divide-gray-200 border-t border-gray-200 text-sm dark:divide-gray-800 dark:border-gray-800">
                    {% for category in categories %}
                        <li id="category-{{ category.uuid }}" class="flex justify-between gap-x-6 py-4">
                            <div class="font-medium text-gray-900 dark:text-white">{{ category.name }} <span class="text-xs text-gray-400">({{ category.alias }})</span></div>
                            <a href="{{ path('admin_tools_settings_category_edit', {uuid: category.uuid.toBase58}) }}" data-turbo-frame="modal" class="font-semibold text-primary-600 hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300">Bearbeiten</a>
                        </li>
                    {% endfor %}
                </ul>

                <div class="flex border-t border-gray-200 pt-4 dark:border-gray-800">
                    <a href="{{ path('admin_tools_settings_category_create') }}" data-turbo-frame="modal" class="text-sm font-semibold text-primary-600 hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300"><span aria-hidden="true">+</span> Kategorie hinzufügen</a>
                </div>
            </section>

            {# ─── Installation ─── #}
            {% if multi_tenancy_enabled() %}
                <section id="installation" class="mt-14 scroll-mt-24 border-t border-gray-200 pt-8 dark:border-gray-800">
                    <h3 class="text-base/7 font-semibold text-gray-900 dark:text-white">Installation</h3>
                    <p class="mt-1 max-w-2xl text-sm/6 text-gray-500 dark:text-gray-400">
                        Mandantentrennung ist aktiv: {{ tenantCount == 1 ? 'Diese Installation ist für mehrere Mandanten ausgelegt' : tenantCount ~ ' Mandanten teilen diese Installation' }}.
                        Mail-Transport, Dateiablage und Warteschlange sind Infrastruktur — sie brauchen DNS-Einträge,
                        Zugangsdaten oder Webhooks, werden vom Betrieb gepflegt und gelten für alle Mandanten.
                        Absender- und Antwortadresse bleiben pro Mandant; geteilt ist nur der Transportweg.
                    </p>
                </section>
            {% endif %}

        </main>

        {# ─── Save bar ─── #}
        <div class="fixed bottom-0 left-0 z-40 w-full border-t border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-950">
            <div class="mx-auto flex max-w-7xl items-center gap-x-4 px-2 py-3 sm:px-4 lg:px-8">
                <p class="hidden text-xs text-gray-500 sm:block dark:text-gray-400">Änderungen gelten sofort für alle Anmeldungen und Mails{{ multi_tenancy_enabled() ? ' dieses Mandanten' }}.</p>
                <div class="flex-1"></div>
                <twig:Admin:Button variant="ghost" size="sm" href="{{ path('admin_tools_settings_general') }}">Verwerfen</twig:Admin:Button>
                {# Enabled/disabled is driven by the admin-edit controller's
                   dirty flag (initially clean → disabled on connect). #}
                <twig:Admin:Button variant="primary" size="sm" type="submit" form="{{ form.vars.id }}"
                                   data-ferienpass--admin-edit-target="saveButton"
                                   data-action="ferienpass--admin-edit#startSaving">
                    <twig:ux:icon name="ph:floppy-disk" class="mr-2 size-4"/>
                    Speichern
                </twig:Admin:Button>
            </div>
        </div>

    </div>

{% endblock %}
