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

{% block container %}
    <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-16 text-center">
        {% if attendance is null %}
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{{ 'applicationConfirmed.invalid.title'|trans }}</h1>
            <p class="mt-3 text-gray-500 dark:text-gray-300">{{ 'applicationConfirmed.invalid.text'|trans }}</p>
        {% else %}
            <div class="mx-auto mb-6 grid h-14 w-14 place-items-center rounded-full bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-300">
                <svg class="h-7 w-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
            </div>

            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{{ 'applicationConfirmed.title'|trans }}</h1>

            <p class="mt-3 text-gray-600 dark:text-gray-300">
                {% if attendance.awaitingConsents %}
                    {{ 'applicationConfirmed.awaitingConsents'|trans({ offer: attendance.offer.name }) }}
                {% elseif attendance.waitlisted %}
                    {{ 'applicationConfirmed.waitlisted'|trans({ offer: attendance.offer.name }) }}
                {% elseif attendance.confirmed %}
                    {{ 'applicationConfirmed.confirmed'|trans({ offer: attendance.offer.name }) }}
                {% else %}
                    {{ 'applicationConfirmed.received'|trans({ offer: attendance.offer.name }) }}
                {% endif %}
            </p>

            {# Consents postponed to the legal guardian: hand the applicant the
               signing link to forward (we don't know the guardian's contact). #}
            {% if attendance.awaitingConsents and attendance.consentToken %}
                {% set consent_url = url('cms_consent_link', { token: attendance.consentToken }) %}
                {% set share_text = 'applicationConfirmed.guardianLink.shareText'|trans({ offer: attendance.offer.name, link: consent_url }) %}
                <div class="mt-8 rounded-xl border border-amber-200 bg-amber-50 px-5 py-4 text-left text-sm dark:border-amber-400/30 dark:bg-amber-400/10">
                    <p class="flex items-center gap-2 font-semibold text-amber-900 dark:text-amber-300">
                        <twig:ux:icon name="lucide:shield-alert" class="size-4 flex-none" />
                        {{ 'applicationConfirmed.guardianLink.title'|trans }}
                    </p>
                    <p class="mt-1 text-amber-900/90 dark:text-amber-200/90">{{ 'applicationConfirmed.guardianLink.text'|trans }}</p>

                    <div class="mt-3 flex items-stretch gap-2">
                        <input type="text" readonly value="{{ consent_url }}" onclick="this.select()"
                               class="block w-full min-w-0 rounded-md border-0 bg-white px-3 py-2 font-mono text-xs text-gray-700 ring-1 ring-inset ring-amber-200 dark:bg-gray-900 dark:text-gray-300 dark:ring-amber-400/30">
                        <button type="button"
                                onclick="navigator.clipboard.writeText(this.previousElementSibling.value)"
                                class="inline-flex flex-none items-center gap-1.5 rounded-md bg-white px-3 py-2 text-xs font-semibold text-gray-700 ring-1 ring-inset ring-amber-200 transition hover:bg-amber-100 dark:bg-gray-900 dark:text-gray-200 dark:ring-amber-400/30">
                            <twig:ux:icon name="lucide:copy" class="size-3.5" />
                            {{ 'applicationConfirmed.guardianLink.copy'|trans }}
                        </button>
                    </div>

                    <div class="mt-2.5 flex flex-wrap gap-2">
                        <a href="mailto:?subject={{ 'applicationConfirmed.guardianLink.shareSubject'|trans({ offer: attendance.offer.name })|url_encode }}&body={{ share_text|url_encode }}"
                           class="inline-flex items-center gap-1.5 rounded-md bg-white px-3 py-2 text-xs font-semibold text-gray-700 ring-1 ring-inset ring-amber-200 transition hover:bg-amber-100 dark:bg-gray-900 dark:text-gray-200 dark:ring-amber-400/30">
                            <twig:ux:icon name="lucide:mail" class="size-3.5" />
                            {{ 'applicationConfirmed.guardianLink.shareMail'|trans }}
                        </a>
                        <a href="sms:?body={{ share_text|url_encode }}"
                           class="inline-flex items-center gap-1.5 rounded-md bg-white px-3 py-2 text-xs font-semibold text-gray-700 ring-1 ring-inset ring-amber-200 transition hover:bg-amber-100 dark:bg-gray-900 dark:text-gray-200 dark:ring-amber-400/30">
                            <twig:ux:icon name="lucide:message-circle" class="size-3.5" />
                            {{ 'applicationConfirmed.guardianLink.shareSms'|trans }}
                        </a>
                    </div>
                </div>
            {% endif %}

            <div class="mt-8 rounded-xl border border-gray-200 bg-gray-50 px-5 py-4 text-left text-sm text-gray-600 dark:border-gray-700 dark:bg-gray-800/60 dark:text-gray-300">
                <p class="font-semibold text-gray-900 dark:text-gray-100">{{ 'applicationConfirmed.accountHint.title'|trans }}</p>
                <p class="mt-1">{{ 'applicationConfirmed.accountHint.text'|trans }}</p>
                <twig:Cms:Button variant="primary"
                        href="{{ path('cms', { to: 'offer_list' }) }}#registrieren"
                        class="mt-3 gap-1.5">
                    {{ 'applicationConfirmed.accountHint.cta'|trans }}
                    <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg>
                </twig:Cms:Button>
            </div>
        {% endif %}
    </div>
{% endblock %}
