{{/*
    Desktop language switcher.

    Links point at the translation of the *current* page when one exists, so
    switching language keeps the visitor where they are. When the current page
    has no translation we fall back to the home page of the target language.
*/}}
{{ if hugo.IsMultilingual }}
{{ $page := . }}
{{ $headerConfig := .Site.Params.header }}
{{ $dropdownConfig := $headerConfig.menu.dropdown }}
<div class="relative group">
    <button type="button" aria-label="{{ i18n "switchLanguage" }}" class="flex items-center {{ with $headerConfig.menu.linkClass }}{{ . }}{{ else }}text-base text-gray-900 hover:text-primary-600 font-bold transition duration-200{{ end }}">
        {{ .Site.Language.LanguageName }}
        <svg class="ml-2 w-4 h-4" 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"></path>
        </svg>
    </button>
    <div class="absolute right-0 mt-2 {{ $dropdownConfig.width | default "w-72" }} opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 ease-in-out">
        <div class="{{ $dropdownConfig.container_padding | default "py-6" }} {{ $dropdownConfig.background | default "bg-white" }} {{ $dropdownConfig.border | default "border border-gray-100" }} {{ $dropdownConfig.shadow | default "shadow-xl" }} {{ $dropdownConfig.radius | default "rounded-lg" }}">
            {{ range hugo.Sites }}
                {{ $lang := .Language.Lang }}
                {{ if ne $.Site.Language.Lang $lang }}
                {{ $target := .Home }}
                {{ range $page.AllTranslations }}
                    {{ if eq .Lang $lang }}{{ $target = . }}{{ end }}
                {{ end }}
                <a href="{{ $target.RelPermalink }}" hreflang="{{ $lang }}" lang="{{ $lang }}" class="language-switch-link block {{ $dropdownConfig.item_padding | default "px-8 py-3" }} {{ $dropdownConfig.text_size | default "text-sm" }} {{ $dropdownConfig.text_color | default "text-gray-700" }} {{ $dropdownConfig.hover_background | default "hover:bg-gray-50" }}" data-lang="{{ $lang }}">
                    {{ .Language.LanguageName }}
                </a>
                {{ end }}
            {{ end }}
        </div>
    </div>
</div>
{{ end }}