@php
    $currentLang = App::currentLocale();
    $langs = App\Models\Lang::where('is_active', true)->get();
@endphp

@if ($langs->count() > 1)
    <x-dropdown width="24">
        <x-slot name="trigger">
            <div class="flex gap-[30px] max-[500px]:gap-[20px] items-center">
                <button type="button"
                    class="items-center inline-flex justify-center w-[82px] h-[44px] text-[14px] font-mulish bg-white border border-solid border-[#F7F7F7] rounded-[10px]">
                    {{-- <x-dynamic-component :component="'svg.' . $currentLang . '-flag'" /> --}}
                    {{ Str::upper($currentLang) }}
                    <svg width="13" height="9" class="ml-2.5 arrow-1 transform transition-transform duration-300"
                        :class="{ 'rotate-180': open }" viewBox="0 0 13 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M0.833344 1.16663L6.50001 6.83329L12.1667 1.16663" stroke="black" stroke-width="2" />
                    </svg>
                </button>
            </div>
        </x-slot>
        <x-slot name="content">
            <div class="text-base list-none bg-white divide-y divide-gray-100 transition-all">
                <ul class="py-2" role="none">
                    @foreach ($langs as $lang)
                        <li class="text-left">
                            <a   href="{{ route('langs.index', ['lang' => $lang->name]) }}"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 text-center cursor-pointer" role="menuitem">
                                <div class="inline-flex items-center">
                                    {{-- <x-dynamic-component :component="'svg.' . $lang->name . '-flag'" /> --}}
                                    {{ Str::upper($lang->name) }}
                                </div>
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>
        </x-slot>
    </x-dropdown>
@else
    <div class="flex gap-[30px] max-[500px]:gap-[20px] items-center">
        <span class="items-center inline-flex justify-center w-[82px] h-[44px] text-[14px] font-mulish bg-white border border-solid border-[#F7F7F7] rounded-[10px]">
            {{ Str::upper($currentLang) }}
        </span>
    </div>
@endif