@php
    $locales = config('locales', []);
    $current = app()->getLocale();
    $currentNative = $locales[$current]['native'] ?? strtoupper($current);
@endphp

<div x-data="{ open: false }" @click.outside="open = false" {{ $attributes->merge(['class' => 'relative']) }}>
    <button type="button" @click="open = !open" :aria-expanded="open"
        class="inline-flex items-center gap-1 px-3 py-2 rounded-full text-on-surface-variant hover:text-primary hover:bg-primary/5 transition-colors font-body-md text-body-md"
        aria-label="Change language">
        <span class="material-symbols-outlined text-xl">language</span>
        <span>{{ $currentNative }}</span>
        <span class="material-symbols-outlined text-lg" x-show="!open">expand_more</span>
        <span class="material-symbols-outlined text-lg" x-show="open" x-cloak>expand_less</span>
    </button>
    <div x-show="open" x-cloak x-transition
        class="absolute end-0 mt-2 w-40 py-2 bg-surface-container-lowest rounded-xl shadow-lg border border-outline-variant z-50">
        @foreach ($locales as $code => $meta)
            <a href="{{ route('locale.switch', $code) }}"
                class="flex items-center justify-between px-4 py-2 text-body-md hover:bg-primary/5 transition-colors {{ $code === $current ? 'text-primary font-bold' : 'text-on-surface-variant' }}">
                <span>{{ $meta['native'] }}</span>
                @if ($code === $current)
                    <span class="material-symbols-outlined text-lg">check</span>
                @endif
            </a>
        @endforeach
    </div>
</div>