<div {{ attributes|raw }} class="grid grid-cols-1 gap-x-8 gap-y-10 py-16 md:grid-cols-3 border-t border-gray-200 dark:border-gray-800">
    <div>
        <h2 class="text-base/7 font-semibold text-gray-900 dark:text-gray-50">{{ 'participants.title'|trans({}, 'cms') }}</h2>
        <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">{{ 'participants.description'|trans({}, 'cms') }}</p>
    </div>

    {% form_theme form '@Contao/components/participants/_buttons.html.twig' %}

    {{ form_start(form, {
        attr: {
            'data-action': 'live#action:prevent',
            'data-live-action-param': 'save',
            'class': 'md:col-span-2'
        }
    }) }}

    <div class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
        <div class="p-6">
            {% set kidTints = ['#2b6f9e', '#2f6f57', '#c97a16', '#7b5ea7', '#235a82'] %}

            {% if form.participants|length %}
                <ul role="list" class="divide-y divide-gray-200 dark:divide-gray-700">
                    {% for child in form.participants %}
                        {% set entity = child.vars.value %}
                        {% set isNew = entity is null or entity.id is null %}
                        {% set uuidStr = isNew ? null : entity.uuid ~ '' %}
                        {% set editMode = isNew or (uuidStr in editing) %}
                        {% set first = child.firstname.vars.value %}
                        {% set last = child.lastname.vars.value %}
                        {% set fullName = (first ~ ' ' ~ last)|trim %}
                        {# Use the entity's DateTime, not the form's localized view value:
                           under non-Latin locales (e.g. Arabic) the view value carries
                           non-ASCII digits that date() cannot parse. #}
                        {% set dob = entity ? entity.dateOfBirth : null %}
                        {% set age = dob ? date(dob).diff(date()).y : null %}
                        {% set tint = kidTints[loop.index0 % kidTints|length] %}

                        <li class="py-3.5 first:pt-0 last:pb-0">
                            {% if not editMode %}
                                {# ─── read-only view ─── #}
                                <div class="flex items-center gap-3.5">
                                    <div class="grid h-10 w-10 flex-none place-items-center rounded-xl text-sm font-bold text-white" style="background-color: {{ tint }}">{{ first ? first|first|upper : 'K' }}</div>
                                    <div class="min-w-0 flex-1">
                                        <p class="truncate text-sm font-semibold leading-6 text-gray-900 dark:text-gray-50">{{ entity.name }}</p>
                                        <p class="mt-0.5 flex items-center gap-2 text-xs leading-5 text-gray-500 dark:text-gray-400">
                                            {{ entity.dateOfBirth|date('d.m.Y') }}
                                            {% if age is not null %}<span class="text-gray-400 dark:text-gray-500">· {{ 'onboarding.children.ageYears'|trans({'age': age}, 'cms') }}</span>{% endif %}
                                        </p>
                                    </div>
                                    <button type="button"
                                            data-action="live#action:prevent"
                                            data-live-action-param="edit"
                                            data-live-uuid-param="{{ uuidStr }}"
                                            class="inline-flex flex-none items-center gap-1.5 rounded-md border border-gray-300 bg-white px-3 py-1.5 text-xs font-semibold text-gray-700 shadow-xs transition hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200">
                                        <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>
                                        {{ 'participants.edit'|trans({}, 'cms') }}
                                    </button>
                                </div>
                            {% else %}
                                {# ─── inline edit ─── #}
                                <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 text-lg font-bold text-white" style="background-color: {{ tint }}">{{ 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 isNew %}
                                            {% if child.vars.button_delete is defined %}
                                                {{ form_widget(child.vars.button_delete) }}
                                            {% endif %}
                                        {% else %}
                                            <button type="button"
                                                    data-action="live#action:prevent"
                                                    data-live-action-param="stopEditing"
                                                    data-live-uuid-param="{{ uuidStr }}"
                                                    class="inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-[12px] font-semibold text-gray-500 transition hover:bg-gray-100 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="M20 6 9 17l-5-5"/></svg>
                                                {{ 'participants.doneEditing'|trans({}, 'cms') }}
                                            </button>
                                        {% 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>
                            {% endif %}
                        </li>
                    {% endfor %}
                </ul>
            {% else %}
                <div class="py-8 text-center">
                    <svg class="mx-auto mb-2 h-7 w-7 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-6 8-6s8 2 8 6"/></svg>
                    <p class="text-sm leading-relaxed text-gray-500 dark:text-gray-400">{{ 'participants.empty'|trans({}, 'cms') }}</p>
                </div>
            {% endif %}

            {% if error|default is not empty %}
                <div class="mt-6">
                    {% embed '@FerienpassCore/Alert/error.html.twig' %}
                        {% block content %}
                            {{ error }}
                        {% endblock %}
                    {% endembed %}
                </div>
            {% endif %}
        </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">
            {{ form_widget(form.participants.vars.button_add) }}
            {{ form_widget(form.submit, { attr: { class: 'whitespace-nowrap' } }) }}
        </div>
    </div>

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

</div>
