{% trans_default_domain 'admin' %}
{% import "@ContaoCore/Image/Studio/_macros.html.twig" as studio %}

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

<div {{ attributes }}>

    <div class="flex items-stretch overflow-hidden h-full">
        <main class="flex-1 overflow-y-auto">
            <div class="pr-8">
                <div class="flex justify-between items-center">
                    <twig:Admin:FileStorageSwitcher
                            :storages="['media', 'logos', 'attachments']"
                            current="{{ storage }}"
                            baseLabel="{{ 'files.title'|trans }}" />
                    <div class="flex items-center rounded-lg bg-gray-100 dark:bg-gray-800 p-0.5">
                        <button type="button"
                                data-action="live#action"
                                data-live-action-param="toggleView"
                                data-live-view-param="list"
                                class="cursor-pointer {{ view == 'list' ? 'bg-white dark:bg-gray-700 shadow-sm text-gray-900 dark:text-gray-100' : 'text-gray-400 hover:bg-white dark:hover:bg-gray-700 hover:shadow-sm' }} rounded-md p-1.5 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500">
                            <twig:ux:icon name="ph:list" class="h-5 w-5" aria-hidden="true" />
                            <span class="sr-only">Use list view</span>
                        </button>
                        <button type="button"
                                data-action="live#action"
                                data-live-action-param="toggleView"
                                data-live-view-param="grid"
                                class="cursor-pointer ml-0.5 {{ view == 'grid' ? 'bg-white dark:bg-gray-700 shadow-sm text-gray-900 dark:text-gray-100' : 'text-gray-400 hover:bg-white dark:hover:bg-gray-700 hover:shadow-sm' }} rounded-md p-1.5 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500">
                            <twig:ux:icon name="ph:squares-four" class="h-5 w-5" aria-hidden="true" />
                            <span class="sr-only">Use grid view</span>
                        </button>
                    </div>
                </div>

                <section class="mt-8 pb-16" aria-labelledby="gallery-heading">
                    <h2 id="gallery-heading" class="sr-only">Recently viewed</h2>

                    {% include '@FerienpassAdmin/components/Files/_items.html.twig' %}

                </section>
            </div>
        </main>

        <aside class="{{ current ? 'w-96 border-l' : 'w-0' }} transition-all duration-300 overflow-y-auto overflow-hidden border-gray-200 dark:border-gray-800">
            <div class="w-96 p-8">
                <twig:Admin:Files:Details :item="current" :storage="storage" :offerUuid="offerUuid" key="{{ current.uuid ?? 'noop' }}" />
            </div>
        </aside>

    </div>

</div>
