{% trans_default_domain 'admin' %}
{% set translationPrefix = app.request.attributes.get('_route')|split('_')[1] %}

{# One grouped query for the whole page instead of the row template counting
   each item's EXTRA_LAZY `conversation` collection on its own (n+1). #}
{% if commentCounts is not defined %}
    {% set commentCounts = conversation_counts(items) %}
{% endif %}

{% if items is not empty %}

    <ul role="list" class="divide-y divide-gray-200 dark:divide-gray-800/50">

        {% set current_group = null %}
        {% for item in items %}

            {# Same section headings the table layout draws, so switching layout
               never drops the grouping (a waiting-list entry must stay visibly
               separated from the participants in every view). #}
            {% if groupBy|default(null) is not null %}
                {% set group_value = include(template_from_string(groupBy)) %}
                {% if group_value != current_group %}
                    <li class="bg-gray-50 px-4 py-2 text-sm font-semibold text-gray-900 sm:px-0 dark:bg-gray-900/50 dark:text-gray-100">{{ group_value }}</li>
                    {% set current_group = group_value %}
                {% endif %}
            {% endif %}

            {% include '@FerienpassAdmin/components/_list_item.html.twig' with _context|merge({ item: item }) %}
        {% endfor %}

    </ul>

{% else %}

    {% set action = action|default((routeName ?? app.request.attributes.get('_route')|split('.')|first)|split('_')[2]) %}
    {% set _emptyDescriptionKey = "#{translationPrefix}.#{action}.emptyDescription" %}
    {% set _emptyDescription = _emptyDescriptionKey|trans %}
    <div class="mt-6 rounded-md border-2 border-dashed border-gray-200 dark:border-gray-800 p-12 text-center">
        <twig:ux:icon name="ph:tray" class="mx-auto size-12 text-gray-300 dark:text-gray-600" />
        <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">{{ "#{translationPrefix}.#{action}.empty"|trans }}</h3>
        {% if _emptyDescription != _emptyDescriptionKey %}
            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ _emptyDescription }}</p>
        {% endif %}
    </div>

{% endif %}
