{% set item_id = item.id|default(item.participant1.id|default(item[0].id|default(null))) %}
<li id="li-{{ item_id }}" class="flex items-center justify-between gap-x-6 py-4"
    data-action="contextmenu->ferienpass--admin-list#showContextMenu"
>
    <div class="min-w-0">
        <div class="flex items-start gap-x-3">
            <div class="text-sm font-semibold leading-6 text-gray-900 dark:text-gray-100/80">{{ title|default(null) is not null ? include(template_from_string(title)) : "" }}</div>
        </div>

        {% if info is defined %}

            <div class="mt-1 flex items-center gap-x-2 text-xs leading-5 text-gray-500 dark:text-gray-100/40">

                {% set renderedInfo = [] %}
                {% for i in info %}
                    {% set return = i|default(null) is not null ? include(template_from_string(i))|trim : "" %}
                    {% if return %}
                        {% set renderedInfo = renderedInfo|merge([return]) %}
                    {% endif %}
                {% endfor %}

                {% for infoItem in renderedInfo %}
                    <div class="truncate">{{ infoItem|raw }}</div>

                    {% if not loop.last %}
                        <svg viewBox="0 0 2 2" class="h-0.5 w-0.5 fill-current">
                            <circle cx="1" cy="1" r="1"/>
                        </svg>
                    {% endif %}
                {% endfor %}

            </div>

        {% endif %}

    </div>

    {% if showActions ?? true %}
    <div class="flex flex-none items-center gap-x-4">


        {% if aside|default(null) is not null %}
            <div class="text-base font-semibold leading-6 shrink-0">
                {{ include(template_from_string(aside)) }}
            </div>
        {% endif %}

        {% set actions = list_actions(item, [], { view: routeName ?? app.request.get('_route') }) %}
        {% set actions = actions.children|filter(a => a.displayed) %}

        {% set comments = item.comments|default(null) %}
        {% if (is_granted('ROLE_ADMIN') or is_granted('ROLE_PARTICIPANTS_ADMIN')) and comments is not null and showUrl|default(null) is not null %}
            <a href="{{ include(template_from_string(showUrl)) }}?kommentare=1"
               data-turbo-frame="slideover"
               class="flex w-16 items-center justify-end gap-x-1">
                <span class="size-6 text-gray-400" aria-hidden="true">{{ ux_icon('ph:chat-dots') }}</span>
                <span class="text-xs leading-6 text-gray-700 dark:text-gray-300">{{ comments|length }}</span>
            </a>
        {% endif %}

        {% if translationPrefix|default is empty %}
            {% set translationPrefix = app.request.get('_route')|split('_')[1] %}
        {% endif %}

        {% if translationPrefix == 'hosts' and item.users|default([]) is not empty %}
            <div class="flex -space-x-1 overflow-hidden">
                {% for u in item.users|slice(0,5) %}
                    <span class="inline-flex size-6 items-center justify-center rounded-full bg-gray-400 dark:bg-gray-600 ring-2 ring-white outline -outline-offset-1 outline-black/5 dark:ring-gray-900 dark:outline-white/10" title="{{ u.firstname }} {{ u.lastname }}">
                        <span class="text-[10px] font-medium leading-none text-white">{{ (u.firstname|first|default('') ~ u.lastname|first|default(''))|upper }}</span>
                    </span>
                {% endfor %}
                {% if item.users|length > 5 %}
                    <span class="inline-flex size-6 items-center justify-center rounded-full bg-gray-400 dark:bg-gray-600 ring-2 ring-white outline -outline-offset-1 outline-black/5 dark:ring-gray-900 dark:outline-white/10">
                        <span class="text-[10px] font-medium leading-none text-white">+{{ item.users|length - 5 }}</span>
                    </span>
                {% endif %}
            </div>
        {% endif %}

        {% if actionUrl|default(null) is not null %}

            <div class="flex-none">

                {% component 'Admin:Dropdown' %}
                    {% block toggle %}
                        <button class="flex items-center rounded-full text-gray-400 hover:text-gray-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:text-gray-400 dark:hover:text-gray-300">
                            <span class="sr-only">Open options</span>
                            <span aria-hidden="true" class="size-5">{{ ux_icon('ph:dots-three-vertical-bold') }}</span>
                        </button>
                    {% endblock %}
                    {% block dropdown %}
                        <div class="py-1">
                            <a href="{{ include(template_from_string(actionUrl)) }}" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 focus:bg-gray-100 dark:focus:bg-gray-700 focus:text-gray-900 dark:focus:text-white focus:outline-hidden">
                                {{ "#{translationPrefix}.action"|trans }}
                            </a>
                        </div>
                    {% endblock %}
                {% endcomponent %}

            </div>

        {% elseif actions|length > 0 %}

            <div class="flex-none">

                {% component 'Admin:Dropdown' %}
                    {% block toggle %}
                        <button class="flex items-center rounded-full text-gray-400 hover:text-gray-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:text-gray-400 dark:hover:text-gray-300">
                            <span class="sr-only">Open options</span>
                            <span aria-hidden="true" class="size-5">{{ ux_icon('ph:dots-three-vertical-bold') }}</span>
                        </button>
                    {% endblock %}
                    {% block dropdown %}
                        {% set sections = actions|map(a => a.extra('section', 'default'))|reduce((unique, s) => s in unique ? unique : unique|merge([s]), []) %}
                        {% for section in sections %}
                            <div class="py-1">
                                {% for action in actions|filter(a => a.extra('section', 'default') == section) %}
                                    {% set itemAttrs = action.extra('attr', [])|merge(action.linkAttributes|default([])) %}
                                            {% component 'Admin:DropdownItem' with { 
                                                href: action.uri, 
                                                attributes: itemAttrs,
                                                method: action.extra('method', 'get'),
                                            } %}
                                                {% block content %}
                                                    {% trans_default_domain 'admin' %}
                                                    <span class="mr-2 size-4 flex-shrink-0 {{ action.extra('color') }}">{{ action.extra('icon') ? ux_icon('ph:'~action.extra('icon')) }}</span>
                                                    {%- set label = action.label -%}
                                                    {%- set label = label|trans(action.extra('translation_params', {})) -%}
                                                    <span class="text-left leading-tight">{{ label }}</span>
                                                {% endblock %}
                                            {% endcomponent %}
                                {% endfor %}
                            </div>
                        {% endfor %}
                    {% endblock %}
                {% endcomponent %}

            </div>

        {% endif %}

    </div>
    {% endif %}
</li>
