{% form_theme form '@Contao/components/registration_welcome/_kids_buttons.html.twig' %}

<div class="flex items-center justify-between gap-4 border-b border-gray-200 bg-gray-50 px-6 py-5 dark:border-gray-700 dark:bg-gray-800/60">
    <div class="flex items-center gap-3">
        <div class="grid h-8 w-8 flex-none place-items-center rounded-lg bg-primary-600 text-sm font-bold text-white">3</div>
        <div>
            <h2 class="text-xl font-bold leading-tight text-gray-900 dark:text-white">{{ 'onboarding.children.cardTitle'|trans({}, 'cms') }}</h2>
            <div class="mt-0.5 text-sm font-medium text-gray-500 dark:text-gray-400">{{ 'onboarding.children.cardSub'|trans({}, 'cms') }}</div>
        </div>
    </div>
</div>

{{ form_start(form, { attr: { 'data-action': 'live#action:prevent', 'data-live-action-param': 'save' } }) }}

<div class="px-6 py-6">

    <div class="mb-5 flex items-start gap-3 rounded-xl bg-gray-50 px-4 py-3.5 text-[13px] leading-relaxed text-gray-700 dark:bg-gray-800/60 dark:text-gray-200">
        <svg class="mt-0.5 h-[18px] w-[18px] flex-none text-primary-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
        <div>{{ 'onboarding.children.intro'|trans({}, 'cms') }}</div>
    </div>

    <div class="space-y-4">
        {% for child in form.participants %}
            {% set first = child.firstname.vars.value %}
            {% set last = child.lastname.vars.value %}
            {% set fullName = (first ~ ' ' ~ last)|trim %}
            {% set dobVal = child.dateOfBirth.vars.value %}
            {% set age = dobVal ? date(dobVal).diff(date()).y : null %}

            <div class="overflow-hidden rounded-2xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
                <div class="grid grid-cols-[44px_1fr_auto] items-center gap-3.5 border-b border-gray-200 bg-gray-50 px-4 py-3.5 dark:border-gray-700 dark:bg-gray-800/60">
                    <div class="grid h-11 w-11 flex-none place-items-center rounded-xl bg-primary-600 text-lg font-bold text-white">{{ first ? first|first|upper : 'K' }}</div>
                    <div class="min-w-0">
                        <div class="truncate text-[15px] font-semibold text-gray-900 dark:text-white">
                            {{ fullName ?: ('onboarding.children.newChild'|trans({}, 'cms')) }}
                        </div>
                        <div class="mt-0.5 flex flex-wrap items-center gap-2.5 text-[12px] font-medium text-gray-500 dark:text-gray-400">
                            {% if age is not null %}
                                <span>{{ 'onboarding.children.ageYears'|trans({'age': age}, 'cms') }}</span>
                            {% else %}
                                <span>{{ 'onboarding.children.dobMissing'|trans({}, 'cms') }}</span>
                            {% endif %}
                        </div>
                    </div>
                    {% if child.vars.button_delete is defined %}
                        {{ form_widget(child.vars.button_delete) }}
                    {% endif %}
                </div>

                <div class="space-y-3.5 p-4">
                    <div class="grid gap-3.5 sm:grid-cols-2">
                        {{ form_row(child.firstname) }}
                        {{ form_row(child.lastname) }}
                    </div>
                    <div class="max-w-[220px]">
                        {{ form_row(child.dateOfBirth) }}
                    </div>

                    {% if child.sharedNotes is defined %}
                        <details class="group rounded-xl border border-dashed border-gray-300 bg-gray-50 dark:border-gray-600 dark:bg-gray-800/40"{{ child.sharedNotes.vars.value ? ' open' : '' }}>
                            <summary class="flex cursor-pointer list-none items-center gap-2.5 px-3.5 py-3 text-[13px] font-semibold text-gray-700 dark:text-gray-200 [&::-webkit-details-marker]:hidden">
                                <svg class="h-[18px] w-[18px] flex-none text-primary-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg>
                                <span>{{ 'onboarding.children.notesToggle'|trans({}, 'cms') }} <span class="font-medium text-gray-400">{{ 'onboarding.children.notesOptional'|trans({}, 'cms') }}</span></span>
                                <svg class="ml-auto h-3.5 w-3.5 flex-none text-gray-400 transition group-open:rotate-180" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
                            </summary>
                            <div class="space-y-2 px-3.5 pb-3.5">
                                {{ form_widget(child.sharedNotes, { attr: { rows: 3, placeholder: 'onboarding.children.notesPlaceholder'|trans({}, 'cms'), class: 'w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-900 dark:text-white' } }) }}
                                <p class="text-xs leading-relaxed text-gray-500 dark:text-gray-400">{{ 'onboarding.children.notesHelp'|trans({}, 'cms') }}</p>
                                <p class="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
                                    <svg class="h-3.5 w-3.5 flex-none text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                                    {{ 'onboarding.children.notesShared'|trans({}, 'cms') }}
                                </p>
                            </div>
                        </details>
                    {% endif %}

                    {{ form_row(child.accessCodes) }}
                </div>
            </div>
        {% endfor %}
    </div>

    {{ form_widget(form.participants.vars.button_add) }}

    {{ form_row(form.request_token) }}
</div>

<div class="flex items-center justify-between gap-4 border-t border-gray-200 bg-gray-50 px-6 py-4 dark:border-gray-700 dark:bg-gray-800/60">
    {# Back button is `ghost` with a slightly tighter rounding and font-size;
       the rest is layered via class. tailwind_merge resolves the overlap. #}
    <twig:Cms:Button variant="ghost" size="xs"
            data-action="live#action:prevent"
            data-live-action-param="back"
            class="gap-1.5 rounded-lg py-2.5 text-[13.5px] text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
        <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><path d="m11 18-6-6 6-6"/></svg>
        {{ 'onboarding.back'|trans({}, 'cms') }}
    </twig:Cms:Button>
    <twig:Cms:Button variant="primary" size="xl" rounded="xl"
            type="submit"
            data-action="live#action:prevent"
            data-live-action-param="saveAndContinue"
            class="gap-2">
        {{ 'registrationWelcomeSteps.teilnehmer.submit'|trans({}, 'cms') }}
        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg>
    </twig:Cms:Button>
</div>

{{ form_end(form, { render_rest: false }) }}
