{% trans_default_domain 'admin' %}

{% set siblings = participant.user ? participant.user.participants : [] %}
{% set hasInfo = participant.dateOfBirth or participant.user or siblings|length > 1 %}

<div class="w-full mb-6">
    <div class="flex flex-wrap items-baseline gap-x-3.5 gap-y-1.5 min-w-0">
        <h1 class="text-gray-900 dark:text-gray-50 tracking-tight text-xl font-bold truncate">{{ participant.name }}</h1>

        {% if hasInfo %}
            <div class="hidden @lg:block self-center h-4 w-px bg-gray-300 dark:bg-gray-700"></div>

            <div class="flex flex-wrap items-center gap-x-3.5 gap-y-1 text-sm text-gray-500 dark:text-gray-400">
                {% if participant.dateOfBirth %}
                    <span class="inline-flex items-center gap-x-1.5" title="{{ 'participants.label.dateOfBirth'|trans }}">
                        <twig:ux:icon name="ph:cake" class="size-4 text-gray-400 shrink-0" aria-hidden="true" />
                        {{ participant.age }} {{ 'participants.years'|trans }}
                    </span>
                {% endif %}

                {% if participant.user %}
                    <span class="inline-flex items-center gap-x-1.5 min-w-0" title="{{ 'participants.label.user'|trans }}">
                        <twig:ux:icon name="ph:user-circle" class="size-4 text-gray-400 shrink-0" aria-hidden="true" />
                        <span class="truncate">{{ participant.user.name }}</span>
                    </span>
                {% endif %}

                {% if siblings|length > 1 %}
                    {% set siblingPos = 0 %}
                    {% for s in siblings %}{% if s.id == participant.id %}{% set siblingPos = loop.index %}{% endif %}{% endfor %}
                    <span class="inline-flex items-center gap-x-1.5" title="{{ 'participants.siblings_title'|trans({}, 'admin') }}">
                        <twig:ux:icon name="ph:users-three" class="size-4 text-gray-400 shrink-0" aria-hidden="true" />
                        <twig:Admin:Dropdown dropdownClass="w-64" position="left">
                            <twig:block name="toggle">
                                <button class="inline-flex items-center hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 rounded-md px-1.5 py-0.5 -mx-1.5 -my-0.5 transition-colors"
                                        title="{{ 'participants.siblings_title'|trans({}, 'admin') }}">
                                    <span class="whitespace-nowrap">{{ siblingPos }} / {{ siblings|length }}</span>
                                </button>
                            </twig:block>
                            <twig:block name="dropdown">
                                {% for s in siblings %}
                                    <twig:Admin:DropdownItem href="{{ path(app.current_route, app.current_route_parameters|merge({ uuid: s.uuid.toBase58 })) }}" :active="s.id == participant.id">
                                        <span class="truncate">{{ s.name }}</span>
                                        {% if s.dateOfBirth %}
                                            <span class="ml-auto pl-2 text-gray-400 dark:text-gray-500 whitespace-nowrap">{{ s.age }} {{ 'participants.years'|trans({}, 'admin') }}</span>
                                        {% endif %}
                                    </twig:Admin:DropdownItem>
                                {% endfor %}
                            </twig:block>
                        </twig:Admin:Dropdown>
                    </span>
                {% endif %}
            </div>
        {% endif %}
    </div>

    {% include '@FerienpassAdmin/components/_tertiary_nav.html.twig' with { menu: this.menu } only %}
</div>
