{# Per-participant consents — one control per consent MODE, decisions bound to
   the `participantDecisions` LiveProp ('1' | '0' | null):

   ┌─ opt-in ──────── toggle switch, OFF by default. Never blocks. ─────────┐
   ├─ opt-out ─────── toggle switch, ON by default. Never blocks.           │
   ├─ compulsory ──── must-tick acceptance box. Blocks until accepted.      │
   └─ force_decision  two equal buttons, NO preselection. Blocks undecided. ┘

   Decisions are handled CLIENT-SIDE (no POST per click): visual state via
   CSS :checked selectors, the model update + submit gating via the
   ferienpass/cms-application-form Stimulus controller — the values ride
   along with the next live action (apply / applyAnonymous), where the
   server re-validates. The full consent text is always visible (scrolls in
   place), never behind a link or modal.

   Include with: { states, scope, participantDecisions } #}

{% set states = states|default([]) %}
{% set scope = scope|default('') %}
{% set ctl = 'ferienpass--cms-application-form' %}
{% if states is not empty %}
    <div class="border-t border-gray-200 pt-5 dark:border-gray-700">

        <div class="flex items-center gap-3">
            <div class="grid size-8 flex-none place-items-center rounded-md bg-[#e5efe9] text-[#245a46] dark:bg-[#2f6f57]/20 dark:text-[#9cc4ae]">
                <twig:ux:icon name="lucide:user-round" class="size-4" />
            </div>
            <h3 class="text-xs font-bold uppercase tracking-widest text-gray-900 dark:text-gray-100">
                {{ 'applicationForm.consentsTitle'|trans({}, 'cms') }}
            </h3>
        </div>
        <p class="mb-2 mt-1.5 text-[13px] leading-5 text-gray-500 dark:text-gray-400 sm:ml-11">
            {{ 'applicationForm.consentsCaption'|trans({}, 'cms') }}
        </p>

        <div>
            {% for state in states %}
                {% set form = state.consentForm %}
                {% set mode = form.compulsory %}
                {% set radioId = 'consent_' ~ form.id ~ (scope ? '_' ~ scope : '') %}
                {% set decision = participantDecisions[form.id ~ '']|default(null) %}
                {% set model = 'participantDecisions[' ~ form.id ~ ']' %}

                <div class="border-t border-dashed border-gray-200 py-4 first:border-t-0 last:pb-0 dark:border-gray-700"
                     data-ferienpass--cms-application-form-target="decision"
                     data-mode="{{ mode }}">
                    <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">
                        {{ form.title|default('consents.label'|trans({}, 'cms'))|machine_translate }}
                    </p>

                    {# full consent text — always visible, scrolls in place #}
                    {% if form.text %}
                        <div class="prose prose-sm dark:prose-invert mt-1.5 max-h-28 max-w-none overflow-y-auto overscroll-contain pr-3 text-[13px] leading-relaxed text-gray-600 dark:text-gray-400">
                            {{ form.text|markdown_to_html|machine_translate }}
                        </div>
                    {% endif %}

                    <div class="group/dec mt-3 flex flex-wrap items-center gap-3">

                        {% if mode == 'opt-in' or mode == 'opt-out' %}
                            {# toggle switch — opt-in starts OFF, opt-out starts ON #}
                            {% set on = decision == '1' or (decision is null and mode == 'opt-out') %}
                            <label class="inline-flex cursor-pointer items-center gap-3" for="{{ radioId }}">
                                <input type="checkbox" id="{{ radioId }}" class="peer sr-only"
                                       {% if on %}checked{% endif %}
                                       data-decide="switch"
                                       data-model-name="{{ model }}"
                                       data-action="{{ ctl }}#decide">
                                <span aria-hidden="true"
                                      class="relative inline-flex h-6 w-11 flex-none rounded-full bg-gray-300 transition-colors after:absolute after:left-0.5 after:top-0.5 after:size-5 after:rounded-full after:bg-white after:shadow after:transition-transform peer-checked:bg-[#2f6f57] peer-checked:after:translate-x-5 dark:bg-gray-600"></span>
                                <span class="text-xs font-semibold text-gray-500 peer-checked:hidden dark:text-gray-400">{{ 'applicationForm.consentDenied'|trans({}, 'cms') }}</span>
                                <span class="hidden text-xs font-semibold text-[#245a46] peer-checked:inline dark:text-[#9cc4ae]">{{ 'applicationForm.consentGranted'|trans({}, 'cms') }}</span>
                            </label>

                        {% elseif mode == 'compulsory' %}
                            {# must-tick acceptance — blocks the application until accepted #}
                            {% set on = decision == '1' %}
                            <label class="inline-flex cursor-pointer select-none items-center gap-2.5 rounded-lg border border-gray-300 py-2 pl-2.5 pr-3.5 text-sm font-semibold text-gray-700 transition hover:border-gray-400 has-checked:border-[#2f6f57] has-checked:ring-1 has-checked:ring-[#2f6f57] has-checked:bg-[#e5efe9] has-checked:text-[#1f4a3a] dark:border-gray-600 dark:text-gray-200 dark:hover:border-gray-500 dark:has-checked:border-[#3d8064] dark:has-checked:ring-[#3d8064] dark:has-checked:bg-[#2f6f57]/20 dark:has-checked:text-[#cce0d4]">
                                <input type="checkbox" id="{{ radioId }}" class="peer sr-only"
                                       {% if on %}checked{% endif %}
                                       data-decide="check"
                                       data-model-name="{{ model }}"
                                       data-action="{{ ctl }}#decide">
                                <span class="grid size-5 flex-none place-items-center rounded border-2 border-gray-300 text-white peer-checked:border-[#2f6f57] peer-checked:bg-[#2f6f57] peer-checked:[&_svg]:opacity-100 dark:border-gray-500">
                                    <twig:ux:icon name="lucide:check" class="size-3.5 opacity-0 transition-opacity" />
                                </span>
                                <span class="peer-checked:hidden">{{ 'applicationForm.consent.accept'|trans({}, 'cms') }}</span>
                                <span class="hidden peer-checked:inline">{{ 'applicationForm.consent.accepted'|trans({}, 'cms') }}</span>
                            </label>
                            <span class="inline-flex items-center gap-1.5 text-xs font-semibold text-amber-600 group-has-[:checked]/dec:hidden dark:text-amber-400">
                                <twig:ux:icon name="lucide:shield-alert" class="size-4" />
                                {{ 'applicationForm.consent.required'|trans({}, 'cms') }}
                            </span>

                        {% else %}
                            {# force_decision — neither preselected; same look as the
                               registration method toggle: gray track, the active
                               option becomes a white pill. The controller swaps the
                               on/off classes declared below (deterministic across
                               browsers; CSS :has/attribute invalidation is not). #}
                            {% set pill_base = 'flex cursor-pointer select-none items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-semibold transition [&:not([data-on]):hover]:bg-white/60 [&:not([data-on]):hover]:text-gray-900 dark:[&:not([data-on]):hover]:bg-gray-800/60 dark:[&:not([data-on]):hover]:text-gray-100' %}
                            {% set pill_off = 'text-gray-500 dark:text-gray-400' %}
                            {% set pill_yes = 'bg-white shadow-sm text-[#245a46] dark:bg-gray-800 dark:text-[#9cc4ae]' %}
                            {% set pill_no = 'bg-white shadow-sm text-red-600 dark:bg-gray-800 dark:text-red-400' %}
                            <span data-seg class="inline-grid grid-cols-2 gap-1.5 rounded-lg bg-gray-100 p-1 dark:bg-gray-700">
                                <label {% if decision == '1' %}data-on{% endif %}
                                       data-on-classes="{{ pill_yes }}" data-off-classes="{{ pill_off }}"
                                       class="{{ pill_base }} {{ decision == '1' ? pill_yes : pill_off }}">
                                    <input type="radio" id="{{ radioId }}_agree" class="peer sr-only"
                                           name="{{ radioId }}" value="1"
                                           {% if decision == '1' %}checked{% endif %}
                                           data-decide="radio"
                                           data-model-name="{{ model }}"
                                           data-action="{{ ctl }}#decide">
                                    <twig:ux:icon name="lucide:check" class="size-3.5 {{ decision == '1' ? '' : 'hidden' }}" />
                                    {{ 'applicationForm.agree'|trans({}, 'cms') }}
                                </label>
                                <label {% if decision == '0' %}data-on{% endif %}
                                       data-on-classes="{{ pill_no }}" data-off-classes="{{ pill_off }}"
                                       class="{{ pill_base }} {{ decision == '0' ? pill_no : pill_off }}">
                                    <input type="radio" id="{{ radioId }}_revoke" class="peer sr-only"
                                           name="{{ radioId }}" value="0"
                                           {% if decision == '0' %}checked{% endif %}
                                           data-decide="radio"
                                           data-model-name="{{ model }}"
                                           data-action="{{ ctl }}#decide">
                                    <twig:ux:icon name="lucide:x" class="size-3.5 {{ decision == '0' ? '' : 'hidden' }}" />
                                    {{ 'applicationForm.revoke'|trans({}, 'cms') }}
                                </label>
                            </span>
                            <span data-caption class="items-center gap-1.5 text-xs font-semibold text-amber-600 [&:not(.hidden)]:inline-flex dark:text-amber-400 {{ decision is not null ? 'hidden' }}">
                                <twig:ux:icon name="lucide:shield-alert" class="size-4" />
                                {{ 'applicationForm.pleaseDecide'|trans({}, 'cms') }}
                            </span>

                        {% endif %}
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endif %}
