

<div class="dropdown d-inline-block">
    <button type="button" class="btn header-item waves-effect"
            data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <img id="header-lang-img" src="{{ flagUrl($locale) }}" alt="@lang('messages.current_language')" height="15" loading="lazy">
    </button>

    <div class="dropdown-menu dropdown-menu-end">
        @forelse($locales as $locale => $language)
            @if($locale === app()->getLocale())
                <a class="dropdown-item notify-item language" aria-current="true" data-locale="{{ $locale }}">
                    <img src="{{ flagUrl($locale) }}" alt="$language" class="me-2" height="15">
                    <span class="align-middle">{{ $language['name'] }}</span>
                </a>
            @else
                <a href="{{ route('language.switch', $locale) }}"
                   class="dropdown-item notify-item language-option" data-locale="{{ $locale }}"
                   hx-get="{{ route('language.switch', $locale) }}" hx-target="body" hx-push-url="true"
                >
                    <img src="{{ flagUrl($locale) }}" alt="{{ $language['name'] }}" class="me-2" width="18" height="13">
                    <span class="align-middle">{{ $language['name'] }}</span>
                </a>
            @endforelse
            @empty
                <span class="dropdown-item disabled">@lang('messages.no_languages')</span>
            @endforelse
    </div>
</div>
