{% trans_default_domain 'admin' %}

{% set selectAction = selectAction|default('live#emit') %}
{% set selectEvent = selectEvent|default('fileSelected') %}
{% set selectParam = selectParam|default('path') %}

{% if view == 'grid' %}
    <ul role="list"
        class="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 md:grid-cols-4 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">

        {% for item in contents.files %}
            <li class="relative">

                <div class="{{ current and item.path == current.path ? 'ring-2 ring-primary-500 ring-offset-2 dark:ring-offset-gray-900' : 'focus-within:ring-2 focus-within:ring-primary-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100 dark:focus-within:ring-offset-gray-900' }} aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 dark:bg-gray-800">

                    {% if item.isImage %}
                        {{ contao_figure(item, picture_config({
                            width: 200,
                            height: 200,
                            resizeMode: 'crop',
                            densities: '1,2',
                        }), {options: { attr: { class: 'pointer-events-none' ~(current and item.path == current.path ? '' : ' group-hover:opacity-85') }}}) }}
                    {% else %}
                        <div class="flex h-full items-center justify-center aspect-square">
                            <twig:ux:icon name="ph:file" class="size-8 text-gray-400 dark:text-gray-500" />
                        </div>
                    {% endif %}

                    <button type="button"
                            data-action="{{ selectAction }}"
                            data-live-{{ selectAction == 'live#emit' ? 'event' : 'action' }}-param="{{ selectEvent }}"
                            data-live-{{ selectParam }}-param="{{ item.path }}"
                            class="absolute inset-0 focus:outline-none">
                        <span class="sr-only">View details for {{ item.name }}</span>
                    </button>
                </div>
                <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900 dark:text-gray-100">
                    {{ item.name }}
                </p>
                <p class="pointer-events-none flex items-center justify-between text-sm font-medium text-gray-500 dark:text-gray-400">

                    {% set fileSize = safe_file_size(item) %}
                    <span>
                        {% if fileSize is not null %}
                            {{ (fileSize / 1000 / 1000)|format_number }} MB
                        {% else %}
                            <span class="text-red-600 dark:text-red-500">Datei fehlt</span>
                        {% endif %}
                    </span>

                    {% if fileSize is null or (item.extraMetadata.model.offers is defined and item.extraMetadata.model.offers.empty) or (item.extraMetadata.model.hosts is defined and item.extraMetadata.model.hosts.empty) %}
                        <twig:ux:icon name="ph:prohibit" class="size-4 text-red-600 dark:text-red-500" />
                    {% endif %}

                </p>
            </li>
        {% endfor %}

    </ul>
{% else %}
    <ul role="list" class="divide-y divide-gray-100 dark:divide-gray-800 -mx-2">
        {% for item in contents.files %}
            <li class="{{ current and item.path == current.path ? 'bg-gray-100 dark:bg-gray-800' : 'hover:bg-gray-100 dark:hover:bg-gray-800' }} group relative flex justify-between gap-x-6 py-2 px-2 rounded-lg">
                <div class="flex min-w-0 gap-x-4">
                    {% if item.isImage %}
                        {{ contao_figure(item, picture_config({
                            width: 48,
                            height: 48,
                            resizeMode: 'crop',
                            densities: '1,2',
                        }), {options: { attr: { class: 'size-12 flex-none rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-800 object-cover' }}}) }}
                    {% else %}
                        <div class="size-12 flex-none rounded-lg bg-gray-100 group-hover:bg-gray-200 dark:bg-gray-800 dark:group-hover:bg-gray-700 flex items-center justify-center">
                            <twig:ux:icon name="ph:file" class="size-6 text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-400" />
                        </div>
                    {% endif %}
                    <div class="min-w-0 flex-auto">
                        <p class="text-sm font-semibold leading-6 text-gray-900 dark:text-gray-100">
                            <button type="button"
                                    data-action="{{ selectAction }}"
                                    data-live-{{ selectAction == 'live#emit' ? 'event' : 'action' }}-param="{{ selectEvent }}"
                                    data-live-{{ selectParam }}-param="{{ item.path }}"
                                    class="focus:outline-none truncate">
                                <span class="absolute inset-x-0 -top-px bottom-0"></span>
                                {{ item.name }}
                            </button>
                        </p>
                        {% set fileSize = safe_file_size(item) %}
                        <p class="mt-1 flex text-xs leading-5 text-gray-500 dark:text-gray-400">
                            {% if fileSize is not null %}
                                {{ (fileSize / 1000 / 1000)|format_number }} MB
                            {% else %}
                                <span class="text-red-600 dark:text-red-500">Datei fehlt</span>
                            {% endif %}
                        </p>
                    </div>
                </div>
                <div class="flex shrink-0 items-center gap-x-4">
                    <div class="hidden sm:flex sm:flex-col sm:items-end">
                        {% set model = item.extraMetadata.model %}
                        {% if model.uploadedBy is defined and model.uploadedBy %}
                            <p class="text-sm leading-6 text-gray-900 dark:text-gray-100">{{ model.uploadedBy.username }}</p>
                        {% endif %}
                        <div class="flex items-center gap-x-1.5">
                            {% if fileSize is null or (model.offers is defined and model.offers.empty) or (model.hosts is defined and model.hosts.empty) %}
                                <div class="flex-none rounded-full bg-red-500/20 p-1">
                                    <div class="size-1.5 rounded-full bg-red-500"></div>
                                </div>
                            {% else %}
                                <div class="flex-none rounded-full bg-emerald-500/20 p-1">
                                    <div class="size-1.5 rounded-full bg-emerald-500"></div>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                    <twig:ux:icon name="ph:caret-right" data-slot="icon" aria-hidden="true" class="size-5 flex-none text-gray-400" />
                </div>
            </li>
        {% endfor %}
    </ul>
{% endif %}
