{{-- resources/views/components/language-switcher-sidebar.blade.php --}}
<div x-data="{ open: false }" class="relative w-full">
    {{-- Redesigned Button/Trigger --}}
    <button @click="open = !open" type="button"
        class="inline-flex items-center justify-between w-full px-3 py-2 text-sm font-medium text-left text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-slate-900 rounded-md hover:bg-gray-200 dark:hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 dark:focus:ring-offset-slate-800 focus:ring-indigo-500 transition-colors">
        <span class="flex items-center">
            {{-- Globe Icon --}}
            <svg class="w-5 h-5 mr-3 text-gray-500 dark:text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none"
                viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M10.5 21l5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 016-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 01-3.827-5.802" />
            </svg>
            {{-- Text for current language --}}
            <span x-text="{'en': 'English', 'es': 'Español'}['{{ app()->getLocale() }}']">
                {{-- Fallback content for non-JS users --}}
                @if (app()->getLocale() === 'es')
                    Español
                @else
                    English
                @endif
            </span>
        </span>
        {{-- Chevron Icon --}}
        <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
            fill="currentColor">
            <path fill-rule="evenodd"
                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                clip-rule="evenodd" />
        </svg>
    </button>

    {{-- Dropdown Panel --}}
    <div x-show="open" @click.away="open = false" x-transition
        class="absolute bottom-auto left-0 right-0 mt-2 w-full origin-top-right rounded-md shadow-lg bg-white dark:bg-slate-900 ring-1 ring-black ring-opacity-5 focus:outline-none z-50"
        style="display: none;">
        <div class="py-1">
            <form action="{{ route('language.switch') }}" method="POST" class="block">
                @csrf
                <input type="hidden" name="locale" value="en">
                <button type="submit"
                    class="w-full text-left px-4 py-2 text-sm flex items-center {{ app()->getLocale() == 'en' ? 'font-semibold text-gray-900 dark:text-white' : 'text-gray-700 dark:text-gray-300' }} hover:bg-gray-100 dark:hover:bg-slate-700"
                    role="menuitem">
                    English
                </button>
            </form>
            <form action="{{ route('language.switch') }}" method="POST" class="block">
                @csrf
                <input type="hidden" name="locale" value="es">
                <button type="submit"
                    class="w-full text-left px-4 py-2 text-sm flex items-center {{ app()->getLocale() == 'es' ? 'font-semibold text-gray-900 dark:text-white' : 'text-gray-700 dark:text-gray-300' }} hover:bg-gray-100 dark:hover:bg-slate-700"
                    role="menuitem">
                    Español
                </button>
            </form>
        </div>
    </div>
</div>