@php
    $locales = config('locales.supported');
    $current = app()->getLocale();
@endphp

<x-filament::dropdown placement="bottom-end" teleport>
    <x-slot name="trigger">
        <button
            type="button"
            title="{{ __('panel.language.switch') }}"
            class="fi-icon-btn relative flex items-center justify-center rounded-lg p-2 text-sm text-gray-400 outline-none transition duration-75 hover:bg-gray-50 hover:text-gray-500 focus-visible:bg-gray-50 dark:text-gray-500 dark:hover:bg-white/5 dark:hover:text-gray-400"
        >
            <span class="text-base leading-none">{{ $locales[$current]['flag'] ?? '🌐' }}</span>
            <span class="sr-only">{{ __('panel.language.switch') }}</span>
        </button>
    </x-slot>

    <x-filament::dropdown.list>
        @foreach ($locales as $code => $meta)
            <x-filament::dropdown.list.item
                :href="route('locale.switch', $code)"
                tag="a"
                :icon="$code === $current ? 'heroicon-m-check' : null"
                :color="$code === $current ? 'primary' : 'gray'"
            >
                {{ $meta['flag'] }} {{ $meta['native'] }}
            </x-filament::dropdown.list.item>
        @endforeach
    </x-filament::dropdown.list>
</x-filament::dropdown>