{# Participant picker — one application at a time. Selecting a child unfolds
   the application form below the list ({@see _participant_form.html.twig}).
   Include WITHOUT `only` (needs `this`, live props and the full context). #}

{% set avatar_tints = ['bg-primary-600', 'bg-[#2f6f57]', 'bg-amber-500', 'bg-violet-600', 'bg-sky-600'] %}

<div class="flex flex-col gap-2.5">
    {% for p in participants %}
        {% set attendance = this.attendance(p) %}
        {% set exclusionReason = not attendance ? this.exclusionReason(p) : null %}
        {% set is_selected = participant is not null and p.id == participant.id %}
        {% set is_actionable = exclusionReason is null %}

        {% set item_classes = is_selected
            ? 'border-primary-500 ring-1 ring-primary-500 bg-primary-50/60 dark:border-primary-400 dark:ring-primary-400 dark:bg-primary-900/20'
            : (is_actionable
                ? 'border-gray-200 bg-white hover:border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:hover:border-gray-600'
                : 'border-gray-200 bg-gray-50 opacity-60 dark:border-gray-700 dark:bg-gray-800/60') %}

        <div {% if is_actionable %}
                 role="button"
                 tabindex="0"
                 data-action="click->live#action keydown.enter->live#action"
                 data-live-action-param="proceed"
                 data-live-participant-param="{{ p.id }}"
             {% endif %}
             class="flex items-center gap-3.5 rounded-lg border px-4 py-3.5 transition {{ is_actionable ? 'cursor-pointer' : 'cursor-not-allowed' }} {{ item_classes }}">

            {# avatar #}
            <span class="grid size-10 flex-none place-items-center rounded-md text-sm font-bold text-white {{ avatar_tints[loop.index0 % avatar_tints|length] }}">
                {{ ((p.firstname|default('')|first) ~ (p.lastname|default('')|first))|upper }}
            </span>

            {# name + status line #}
            <span class="min-w-0 flex-1">
                <b class="block text-[15px] font-semibold leading-5 text-gray-900 dark:text-gray-100">
                    {% if app.user and p.lastname|lower|trim == app.user.lastname|lower|trim %}
                        {{ p.firstname }}
                    {% else %}
                        {{ p.name }}
                    {% endif %}
                </b>
                <span class="mt-0.5 block truncate text-xs font-medium {{ exclusionReason is not null ? 'text-amber-600 dark:text-amber-400' : 'text-gray-500 dark:text-gray-400' }}">
                    {% if attendance is not null %}
                        {{ 'applicationForm.status.alreadyRegistered'|trans({}, 'cms') }}
                        — <twig:Cms:ApplicationStatusBadge :attendance="attendance" size="xs" :emoji="true" />
                    {% elseif exclusionReason is not null %}
                        {{ exclusionReason.userMessage|trans() }}
                    {% else %}
                        {% if p.age is not null %}{{ 'applicationForm.picker.years'|trans({age: p.age}, 'cms') }}{% endif %}
                    {% endif %}
                </span>
            </span>

            {# state control: green check (registered) / radio (selectable) / minus (excluded) #}
            {% if attendance is not null %}
                <twig:ux:icon name="lucide:circle-check" class="size-6 flex-none text-green-500" />
            {% elseif exclusionReason is not null %}
                <twig:ux:icon name="lucide:circle-minus" class="size-6 flex-none text-gray-400" />
            {% else %}
                <span class="grid size-[22px] flex-none place-items-center rounded-full border-2 {{ is_selected ? 'border-primary-600 dark:border-primary-500' : 'border-gray-300 dark:border-gray-600' }}">
                    <span class="size-2.5 rounded-full bg-primary-600 transition-transform dark:bg-primary-500 {{ is_selected ? 'scale-100' : 'scale-0' }}"></span>
                </span>
            {% endif %}
        </div>
    {% endfor %}
</div>

{# the application form unfolds below once a participant is selected #}
{% if participant is not null %}
    {% include '@Contao/components/application_form/_participant_form.html.twig' %}
{% endif %}
