{% trans_default_domain 'admin' %}
{% props storages, current, baseLabel = null %}

{#
   FileStorageSwitcher
   ─────────────────────────────────────────────────────────────────────────
   Single-select headline switcher in the same visual language as
   EditionSwitcher / AccountTypeSwitcher, but optimised for the files page:
   storages are mutually exclusive, so we render a radio-style list and
   navigate as soon as the user picks one — no "Apply" button needed.

   `storages` is a list of slug strings (e.g. ['media', 'logos', 'attachments']);
   labels come from the translation key `files.<slug>`.
#}

{% set currentLabel = current ? ('files.' ~ current)|trans : null %}

<div class="relative"
     x-data="{ open: false }"
     @click.outside="open = false"
     @keydown.escape.window="open = false">

    <button type="button"
            @click="open = !open"
            :aria-expanded="open"
            aria-haspopup="listbox"
            class="group flex items-center gap-2 -ml-1.5 px-1.5 py-0.5 rounded-md transition-colors"
            :class="open ? 'bg-gray-100 dark:bg-gray-800' : 'hover:bg-gray-100 dark:hover:bg-gray-800'">
        <h1 class="text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100 text-left">
            {% if baseLabel %}<span>{{ baseLabel }}</span><span class="text-gray-300 dark:text-gray-600 font-light px-1.5">·</span>{% endif %}
            <span class="text-primary-700 dark:text-primary-300">{{ currentLabel }}</span>
        </h1>
        <span class="size-5 text-gray-400 transition-transform"
              :class="open ? 'rotate-180 text-gray-700 dark:text-gray-200' : 'group-hover:text-gray-700 dark:group-hover:text-gray-200'">
            <twig:ux:icon name="ph:caret-down" />
        </span>
    </button>

    <div x-show="open"
         x-cloak
         x-transition:enter="transition ease-out duration-100"
         x-transition:enter-start="opacity-0 -translate-y-1"
         x-transition:enter-end="opacity-100 translate-y-0"
         x-transition:leave="transition ease-in duration-75"
         x-transition:leave-start="opacity-100 translate-y-0"
         x-transition:leave-end="opacity-0 -translate-y-1"
         class="absolute left-0 top-full mt-2 z-30 w-[min(280px,calc(100vw-2rem))] rounded-lg bg-white dark:bg-gray-900 shadow-xl ring-1 ring-black/5 dark:ring-white/10 overflow-hidden">

        <ul>
            {% for slug in storages %}
                {% set active = slug == current %}
                <li>
                    <a href="{{ path('admin_files', { storage: slug }) }}"
                       class="flex items-center gap-3 px-3 py-2.5 transition-colors {{ active ? 'bg-primary-50/60 dark:bg-primary-900/20' : 'hover:bg-gray-50 dark:hover:bg-gray-800/60' }}">
                        <span class="size-4 rounded-full flex items-center justify-center ring-1 {{ active ? 'ring-primary-600 bg-primary-600' : 'ring-gray-300 dark:ring-gray-600' }}">
                            {% if active %}<span class="size-1.5 rounded-full bg-white"></span>{% endif %}
                        </span>
                        <span class="block text-sm {{ active ? 'font-semibold text-gray-900 dark:text-gray-100' : 'text-gray-800 dark:text-gray-200' }}">{{ ('files.' ~ slug)|trans }}</span>
                    </a>
                </li>
            {% endfor %}
        </ul>
    </div>
</div>
