@if ($hasLanguagesTable && $this->languages->count() > 0)
<div wire:key="language-switcher-{{ $currentLocale }}">
    <x-filament::dropdown
        teleport
        placement="bottom-end"
        width="w-fit"
        class="fi-dropdown fi-user-menu"
        data-nosnippet="true"
    >
        <x-slot name="trigger">
            <div
                class="flex items-center justify-center w-9 h-9 language-switch-trigger text-primary-600 bg-primary-500/10 rounded-lg p-1 ring-2 ring-inset ring-gray-200 hover:ring-gray-300 dark:ring-gray-500 hover:dark:ring-gray-400 cursor-pointer"
                x-tooltip="{
                    content: @js($this->currentLanguage?->name ?? $currentLocale),
                    theme: $store.theme,
                    placement: 'left'
                }"
            >
                <span class="font-semibold text-md uppercase">{{ strtoupper(substr(App::getLocale(), 0, 2)) }}</span>
            </div>
        </x-slot>

        <x-filament::dropdown.list class="!border-t-0 space-y-1 !p-2.5">
            @foreach ($this->languages as $language)
                @if ($language->code !== $currentLocale)
                    <button
                        type="button"
                        wire:click="switchLanguage('{{ $language->code }}')"
                        x-on:click="close"
                        class="flex items-center w-full transition-colors duration-75 rounded-md outline-none fi-dropdown-list-item whitespace-nowrap disabled:pointer-events-none disabled:opacity-70 fi-dropdown-list-item-color-gray hover:bg-gray-950/5 focus:bg-gray-950/5 dark:hover:bg-white/5 dark:focus:bg-white/5 justify-start space-x-2 rtl:space-x-reverse p-1"
                    >
                        <span
                            class="flex items-center justify-center flex-shrink-0 w-7 h-7 p-2 text-xs font-semibold group-hover:bg-white group-hover:text-primary-600 group-hover:border group-hover:border-primary-500/10 group-focus:text-white bg-primary-500/10 text-primary-600 rounded-lg uppercase"
                        >
                            {{ strtoupper(substr($language->code, 0, 2)) }}
                        </span>
                        <span class="text-sm font-medium text-gray-600 hover:bg-transparent dark:text-gray-200">
                            {{ $language->name }}
                        </span>
                    </button>
                @endif
            @endforeach
        </x-filament::dropdown.list>
    </x-filament::dropdown>
</div>
@endif