{{- /* Sprachumschalter. Aufruf: (dict "page" . "variant" "dropdown"|"list") */ -}}
{{ $cur := .page }}
{{ $variant := .variant | default "dropdown" }}

{{ if eq $variant "list" }}
{{/* Einfache Liste (mobiles Offcanvas) */}}
<nav class="op-langswitch op-langswitch--list" aria-label="Sprache / Language">
  {{ range site.Sites }}
    {{ $s := . }}
    {{ $link := $s.Home.RelPermalink }}
    {{ range $cur.AllTranslations }}{{ if eq .Language.Lang $s.Language.Lang }}{{ $link = .RelPermalink }}{{ end }}{{ end }}
    {{ $isCurrent := eq $s.Language.Lang site.Language.Lang }}
    <a class="op-langswitch__item{{ if $isCurrent }} is-current{{ end }}" href="{{ $link }}"
       hreflang="{{ $s.Language.Lang }}" lang="{{ $s.Language.Lang }}"{{ if $isCurrent }} aria-current="true"{{ end }}>
      <span class="op-langswitch__flag" aria-hidden="true">{{ $s.Language.Params.flag }}</span>
      <span class="op-langswitch__name">{{ $s.Language.LanguageName }}</span>
    </a>
  {{ end }}
</nav>
{{ else }}
{{/* Dropdown (Navbar) */}}
<div class="op-langswitch">
  <button class="op-langswitch__toggle" type="button" aria-haspopup="true"
          aria-label="{{ site.Language.LanguageName }} – Sprache wählen / choose language">
    <span class="op-langswitch__flag" aria-hidden="true">{{ site.Language.Params.flag }}</span>
    <span class="op-langswitch__code">{{ upper site.Language.Lang }}</span>
    <span class="op-langswitch__caret" aria-hidden="true"></span>
  </button>
  <div class="op-langswitch__drop" uk-dropdown="mode: click; pos: bottom-right; offset: 4; boundary: .op-navbar">
    <ul class="uk-nav uk-dropdown-nav">
      {{ range site.Sites }}
        {{ $s := . }}
        {{ $link := $s.Home.RelPermalink }}
        {{ range $cur.AllTranslations }}{{ if eq .Language.Lang $s.Language.Lang }}{{ $link = .RelPermalink }}{{ end }}{{ end }}
        {{ $isCurrent := eq $s.Language.Lang site.Language.Lang }}
        <li class="{{ if $isCurrent }}uk-active{{ end }}">
          <a href="{{ $link }}" hreflang="{{ $s.Language.Lang }}" lang="{{ $s.Language.Lang }}"{{ if $isCurrent }} aria-current="true"{{ end }}>
            <span class="op-langswitch__flag" aria-hidden="true">{{ $s.Language.Params.flag }}</span>
            <span class="op-langswitch__name">{{ $s.Language.LanguageName }}</span>
          </a>
        </li>
      {{ end }}
    </ul>
  </div>
</div>
{{ end }}