{% trans_default_domain 'admin' %}

<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">{{ user.name }}</h1>

        {% if user.hosts|length or user.participants|length %}
            <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">
                {% for host in user.hosts %}
                    <a href="{{ path('admin_hosts_show', { uuid: host.uuid.toBase58 }) }}"
                       data-turbo-frame="_top"
                       class="inline-flex items-center gap-x-1.5 min-w-0 hover:text-gray-700 dark:hover:text-gray-300 transition-colors"
                       title="{{ 'accounts.th.hosts'|trans }}">
                        <twig:ux:icon name="ph:storefront" class="size-4 text-gray-400 shrink-0" aria-hidden="true" />
                        <span class="truncate">{{ host.name }}</span>
                    </a>
                {% endfor %}

                {% if user.participants|length %}
                    <span class="inline-flex items-center gap-x-1.5" title="{{ 'accounts.th.participants'|trans }}">
                        <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="{{ 'accounts.th.participants'|trans({}, 'admin') }}">
                                    <span class="whitespace-nowrap">{{ user.participants|length }}</span>
                                </button>
                            </twig:block>
                            <twig:block name="dropdown">
                                {% for p in user.participants %}
                                    <twig:Admin:DropdownItem href="{{ path('admin_participants_edit', { uuid: p.uuid.toBase58 }) }}">
                                        <span class="truncate">{{ p.name }}</span>
                                        {% if p.dateOfBirth %}
                                            <span class="ml-auto pl-2 text-gray-400 dark:text-gray-500 whitespace-nowrap">{{ p.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>
