@php
    $locales = [
        'en' => ['label' => 'English',  'flag' => '🇬🇧'],
        'fr' => ['label' => 'Français', 'flag' => '🇫🇷'],
        'nl' => ['label' => 'Nederlands','flag' => '🇳🇱'],
        'de' => ['label' => 'Deutsch',  'flag' => '🇩🇪'],
        'ar' => ['label' => 'العربية',  'flag' => '🇸🇦'],
        'es' => ['label' => 'Español',  'flag' => '🇪🇸'],
    ];
    $current = app()->getLocale();
    $cur = $locales[$current] ?? $locales['en'];
@endphp

<div x-data="{ open: false }" class="relative">
    <button type="button" @click="open = !open" @click.outside="open = false"
            class="btn-ghost gap-2 !px-2.5"
            :aria-expanded="open"
            title="{{ __('Language') }}">
        <span class="text-base leading-none">{{ $cur['flag'] }}</span>
        <span class="hidden sm:inline text-sm font-medium uppercase">{{ $current }}</span>
        <svg class="w-3.5 h-3.5 opacity-60" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
    </button>

    <div x-show="open" x-cloak x-transition.opacity.duration.150ms
         class="absolute end-0 mt-2 w-44 rounded-xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 shadow-lg z-40 p-1">
        @foreach($locales as $code => $info)
            <form method="POST" action="{{ route('locale.update', $code) }}">
                @csrf
                <button type="submit"
                        class="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm hover:bg-slate-100 dark:hover:bg-slate-800 transition
                               {{ $current === $code ? 'bg-slate-100 dark:bg-slate-800 font-semibold' : '' }}">
                    <span class="text-base leading-none">{{ $info['flag'] }}</span>
                    <span class="flex-1 text-start">{{ $info['label'] }}</span>
                    @if($current === $code)
                        <svg class="w-4 h-4 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
                    @endif
                </button>
            </form>
        @endforeach
    </div>
</div>