{% trans_default_domain 'admin' %}
{% set translationPrefix = (routeName ?? app.request.get('_route'))|split('_')[1] %}
{% set action = (routeName ?? app.request.get('_route')|split('.')|first)|split('_')[2] %}

{% if items is not empty %}

    <div class="flow-root">
        <div class="{{ scrollable ?? true ? 'overflow-x-auto' : 'overflow-hidden' }}">
            <div class="inline-block min-w-full align-middle">
                <div class="group/table @container/table relative{{ selected|length > 0 ? ' has-checked' : '' }}">
                    {% if ms|default(null) is not null %}
                        <div class="absolute top-0 left-14 z-10 hidden h-10 items-center space-x-3 bg-white group-has-checked/table:flex sm:left-12 dark:bg-gray-900">
                            {% for action in msButtons %}
                                {% if action.method == 'GET' %}
                                    <a href="{{ path(action.route, action.routeParameters|merge({ ids: selected })) }}"
                                       {% if action.turboFrame %}data-turbo-frame="{{ action.turboFrame }}"{% endif %}
                                       class="inline-flex items-center rounded-sm bg-white px-2 py-1 text-sm font-semibold text-gray-900 shadow-xs inset-ring inset-ring-gray-300 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-white dark:bg-white/10 dark:text-white dark:inset-ring-white/10 dark:hover:bg-white/15 dark:disabled:hover:bg-white/10"
                                    >{{ "ms.#{action.name}"|trans }}</a>
                                {% else %}
                                    <button type="button" class="inline-flex items-center rounded-sm bg-white px-2 py-1 text-sm font-semibold text-gray-900 shadow-xs inset-ring inset-ring-gray-300 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-white dark:bg-white/10 dark:text-white dark:inset-ring-white/10 dark:hover:bg-white/15 dark:disabled:hover:bg-white/10"
                                            data-action="live#action"
                                            data-live-action-param="submitMultiSelect"
                                            data-live-action-name-param="{{ action.name }}">{{ "ms.#{action.name}"|trans }}</button>
                                {% endif %}
                            {% endfor %}
                        </div>
                    {% endif %}
                    <table class="relative {{ scrollable ?? true ? 'min-w-full' : 'w-full' }} table-fixed divide-y divide-gray-300 dark:divide-white/15">
                        <thead>
                        <tr>

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

                            <th scope="col" class="relative px-7 sm:w-12 sm:px-6">
                                <div class="group absolute top-1/2 left-4 -mt-2 grid size-4 grid-cols-1">
                                    <input type="checkbox"
                                           id="cbx_ms_sa"
                                           data-model="on(change)|selectedAll"
                                           data-action="live#action"
                                           data-live-action-param="selectAll"
                                           class="col-start-1 row-start-1 size-4 appearance-none rounded-sm border border-gray-300 bg-white checked:border-primary-600 checked:bg-primary-600 checked:bg-none indeterminate:border-primary-600 indeterminate:bg-primary-600 indeterminate:bg-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 dark:border-white/20 dark:bg-gray-800/50 dark:checked:border-primary-500 dark:checked:bg-primary-500 dark:indeterminate:border-primary-500 dark:indeterminate:bg-primary-500 dark:focus-visible:outline-primary-500 dark:disabled:border-white/10 dark:disabled:bg-gray-800 dark:disabled:checked:bg-gray-800 forced-colors:appearance-auto" />
                                    <svg viewBox="0 0 14 14" fill="none" class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25 dark:group-has-disabled:stroke-white/25">
                                        <path d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-0 group-has-checked:opacity-100" />
                                        <path d="M3 7H11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-0 group-has-indeterminate:opacity-100" />
                                    </svg>
                                </div>
                                <label for="cbx_ms_sa" class="sr-only">Alle auswählen</label>
                            </th>

                        {% endif %}

                        {% if prepend|default(null) is not null %}
                            <th scope="col" class="relative py-2 pl-1 pr-2 sm:pr-0">&nbsp;</th>
                        {% endif %}

                        {% for th, td in columns %}
                            {% if td is not null %}
                                <th scope="col"
                                    class="py-2 pl-2 pr-1 {{ th in (rightAlignedColumns ?? []) ? "text-right" : "text-left" }} text-sm font-semibold text-gray-900 dark:text-gray-100{% if loop.first %} sm:pl-0{% endif %}{{ th in (squeezedColumns ?? []) ? " hidden @lg/table:table-cell" : "" }}">
                                    {% set translated = "#{translationPrefix}.th.#{th}"|trans %}
                                    {% set headerText = translated == "#{translationPrefix}.th.#{th}" ? th : translated %}
                                    {% if headerText|length > 22 %}
                                        <span title="{{ headerText }}" class="cursor-help">{{ headerText|slice(0, 22) ~ '…' }}</span>
                                    {% else %}
                                        {{ headerText }}
                                    {% endif %}
                                </th>
                            {% endif %}
                        {% endfor %}

                        {% if showActions ?? true %}
                        <th scope="col" class="relative py-2 pl-1 pr-2 sm:pr-0 text-right">&nbsp;</th>
                        {% endif %}

                    </tr>
                    </thead>

                    <tbody class="divide-y divide-gray-200 dark:divide-gray-800">

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

                    {% if groupBy|default(null) is not null %}
                            {% set group_value = include(template_from_string(groupBy)) %}
                            {% if group_value != current_group %}
                                <tr class="bg-gray-50 dark:bg-gray-900/50">
                                    <td colspan="{{ columns|length + (ms|default(null) is not null ? 1 : 0) + (prepend is defined ? 1 : 0) + (showActions ?? true ? 1 : 0) }}"
                                        class="py-2 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">
                                        {{ group_value }}
                                    </td>
                                </tr>
                                {% set current_group = group_value %}
                            {% endif %}
                        {% endif %}

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

                    {% endfor %}

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{% else %}

    {% 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 %}
