{% extends '@Contao/fragment/_container.html.twig' %}
{% trans_default_domain 'cms' %}

{# Consent-signing page for the legal guardian, reached via the shared consent
   link. Plain HTML form (no Live Component) — the POST is handled by
   ConsentLinkController; CSS-only controls mirror the application form's
   consent widgets. #}

{% block container %}
    <div class="mx-auto max-w-2xl px-4 py-12 sm:px-6 lg:px-8">

        {% if signed %}

            {# ── signed just now: confirmation + resulting status ── #}
            <div class="px-2 py-6 text-center">
                <div class="mx-auto mb-4 grid size-16 place-items-center rounded-full bg-[#e5efe9] text-[#2f6f57] dark:bg-[#2f6f57]/20 dark:text-[#5f9a7e]">
                    <twig:ux:icon name="lucide:check" class="size-8" />
                </div>
                <h1 class="text-2xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">
                    {{ 'consentSign.success.title'|trans }}
                </h1>
                <p class="mx-auto mt-2 max-w-md text-sm leading-6 text-gray-600 dark:text-gray-300">
                    {% if attendance.confirmed %}
                        {{ 'consentSign.success.confirmed'|trans({ name: participant.firstname, offer: offer.name }) }}
                    {% elseif attendance.waitlisted %}
                        {{ 'consentSign.success.waitlisted'|trans({ name: participant.firstname, offer: offer.name }) }}
                    {% else %}
                        {{ 'consentSign.success.received'|trans({ name: participant.firstname, offer: offer.name }) }}
                    {% endif %}
                </p>
                <p class="mx-auto mt-2 max-w-md text-xs leading-5 text-gray-500 dark:text-gray-400">
                    {{ 'consentSign.success.note'|trans }}
                </p>
            </div>

        {% elseif not outstanding %}

            {# ── nothing left to sign (link re-opened later) ── #}
            <div class="px-2 py-6 text-center">
                <div class="mx-auto mb-4 grid size-16 place-items-center rounded-full bg-[#e5efe9] text-[#2f6f57] dark:bg-[#2f6f57]/20 dark:text-[#5f9a7e]">
                    <twig:ux:icon name="lucide:check" class="size-8" />
                </div>
                <h1 class="text-2xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">
                    {{ 'consentSign.done.title'|trans }}
                </h1>
                <p class="mx-auto mt-2 max-w-md text-sm leading-6 text-gray-600 dark:text-gray-300">
                    {{ 'consentSign.done.text'|trans({ name: participant.firstname, offer: offer.name }) }}
                </p>
            </div>

        {% else %}

            {# ── intro ── #}
            <div class="mx-auto max-w-md text-center">
                <div class="mx-auto mb-4 grid size-14 place-items-center rounded-lg bg-primary-50 text-primary-700 dark:bg-primary-900/40 dark:text-primary-300">
                    <twig:ux:icon name="lucide:shield-check" class="size-7" />
                </div>
                <p class="mb-2 text-[11px] font-bold uppercase tracking-widest text-primary-700 dark:text-primary-300">
                    {{ 'consentSign.kicker'|trans }}
                </p>
                <h1 class="text-2xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">
                    {{ 'consentSign.title'|trans({ offer: offer.name }) }}
                </h1>
                <p class="mt-2 text-sm leading-6 text-gray-600 dark:text-gray-300">
                    {{ 'consentSign.intro'|trans({ name: participant.name, offer: offer.name }) }}
                </p>
                {% if offer.dates|length %}
                    <p class="mt-2 inline-flex items-center gap-1.5 text-xs font-medium text-gray-500 dark:text-gray-400">
                        <twig:ux:icon name="lucide:calendar" class="size-3.5" />
                        {{ (offer.dates|first).begin|date('d.m.Y H:i') }}
                    </p>
                {% endif %}
            </div>

            <form method="post" class="mt-8 space-y-8">
                <input type="hidden" name="REQUEST_TOKEN" value="{{ contao_request_token() }}">

                {% if error %}
                    <div class="rounded-md border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-700 dark:bg-red-900/20 dark:text-red-300">
                        {{ error|trans }}
                    </div>
                {% endif %}

                {# ── flat consent list, dashed separators (like the form's gate) ── #}
                <div>
                    {% for state in states %}
                        {% set form = state.consentForm %}
                        {% set mode = form.compulsory %}
                        {% set name = 'decisions[' ~ form.id ~ ']' %}
                        <div class="border-t border-dashed border-gray-200 py-5 first:border-t-0 first:pt-0 last:pb-0 dark:border-gray-700">
                            <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">
                                {{ form.title|default('consents.label'|trans)|machine_translate }}
                            </p>

                            {% if form.text %}
                                <div class="prose prose-sm dark:prose-invert mt-1.5 max-h-48 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="mt-3 flex flex-wrap items-center justify-between gap-3">
                                {% if mode == 'compulsory' %}
                                    <span class="inline-flex items-center gap-1.5 text-xs font-semibold text-amber-600 dark:text-amber-400">
                                        <twig:ux:icon name="lucide:shield-alert" class="size-4" />
                                        {{ 'applicationForm.consent.required'|trans }}
                                    </span>
                                    <label class="group/req 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" name="{{ name }}" value="1" required class="peer sr-only">
                                        <span class="grid size-5 flex-none place-items-center rounded border-2 border-gray-300 transition peer-checked:border-[#2f6f57] peer-checked:bg-[#2f6f57] peer-checked:text-white dark:border-gray-500">
                                            <twig:ux:icon name="lucide:check" class="size-3.5 opacity-0 transition-opacity group-has-[input:checked]/req:opacity-100" />
                                        </span>
                                        <span class="peer-checked:hidden">{{ 'applicationForm.consent.accept'|trans }}</span>
                                        <span class="hidden peer-checked:inline">{{ 'applicationForm.consent.accepted'|trans }}</span>
                                    </label>
                                {% elseif mode == 'force_decision' %}
                                    {% set pill = 'flex cursor-pointer select-none items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-semibold text-gray-500 transition [&:not(:has(input:checked)):hover]:bg-white/60 [&:not(:has(input:checked)):hover]:text-gray-900 dark:text-gray-400 dark:[&:not(:has(input:checked)):hover]:bg-gray-800/60 dark:[&:not(:has(input:checked)):hover]:text-gray-100' %}
                                    <span class="inline-flex items-center gap-1.5 text-xs font-semibold text-amber-600 dark:text-amber-400">
                                        <twig:ux:icon name="lucide:shield-alert" class="size-4" />
                                        {{ 'applicationForm.pleaseDecide'|trans }}
                                    </span>
                                    <span class="inline-grid grid-cols-2 gap-1.5 rounded-lg bg-gray-100 p-1 dark:bg-gray-700">
                                        <label class="{{ pill }} has-checked:bg-white has-checked:text-[#245a46] has-checked:shadow-sm dark:has-checked:bg-gray-800 dark:has-checked:text-[#9cc4ae]">
                                            <input type="radio" name="{{ name }}" value="1" required class="sr-only">
                                            {{ 'applicationForm.agree'|trans }}
                                        </label>
                                        <label class="{{ pill }} has-checked:bg-white has-checked:text-red-600 has-checked:shadow-sm dark:has-checked:bg-gray-800 dark:has-checked:text-red-400">
                                            <input type="radio" name="{{ name }}" value="0" required class="sr-only">
                                            {{ 'applicationForm.revoke'|trans }}
                                        </label>
                                    </span>
                                {% else %}
                                    {# opt-in: off by default; opt-out: pre-agreed, unticking objects #}
                                    <span class="text-xs text-gray-500 dark:text-gray-400">
                                        {{ (mode == 'opt-out' ? 'consentSign.optOutHint' : 'consentSign.optInHint')|trans }}
                                    </span>
                                    <label class="inline-flex cursor-pointer select-none items-center gap-2.5">
                                        <input type="checkbox" name="{{ name }}" value="1" class="peer sr-only" {{ mode == 'opt-out' ? 'checked' }}>
                                        <span class="text-xs font-semibold text-gray-500 peer-checked:hidden dark:text-gray-400">{{ 'applicationForm.consentDenied'|trans }}</span>
                                        <span class="hidden text-xs font-semibold text-[#245a46] peer-checked:inline dark:text-[#9cc4ae]">{{ 'applicationForm.consentGranted'|trans }}</span>
                                        <span 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>
                                    </label>
                                {% endif %}
                            </div>
                        </div>
                    {% endfor %}
                </div>

                {# ── signee + submit ── #}
                <div class="space-y-4 border-t border-gray-200 pt-5 dark:border-gray-700">
                    <div>
                        <label for="consent-signee" class="mb-1 block text-sm font-medium leading-5 text-gray-700 dark:text-gray-50">
                            {{ 'consentSign.signeeLabel'|trans }}
                        </label>
                        <input type="text" id="consent-signee" name="signedBy" required autocomplete="name"
                               class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 dark:bg-gray-900 dark:text-gray-100 sm:text-sm sm:leading-6">
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ 'consentSign.signeeHint'|trans({ name: participant.name }) }}</p>
                    </div>

                    <div class="flex justify-end">
                        <twig:Cms:Button variant="primary" type="submit" size="lg" class="gap-2">
                            {{ 'consentSign.submit'|trans({}, 'cms') }}
                            <twig:ux:icon name="lucide:check" class="size-4" />
                        </twig:Cms:Button>
                    </div>
                </div>
            </form>

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