{{- /* Desktop header */ -}}
<header class="desktop" id="header-desktop">
    <div class="header-wrapper">
        <div class="header-title animated bounceIn">
            <a href="{{ `/` | relLangURL }}">
                {{- .Site.Title -}}
            </a>
        </div>
        <div class="menu">
            {{- range .Site.Menus.main -}}
                <a class="menu-item{{ if $.IsMenuCurrent "main" . | or ($.HasMenuCurrent "main" .) | or (.URL | relLangURL | string | eq $.RelPermalink ) }} active{{ end }}" href="{{ .URL | relLangURL }}"{{ with .Title }} title="{{ . }}"{{ end }}>
                    {{- .Pre | safeHTML }}{{ .Name -}}
                </a>
            {{- end -}}
            {{- if .Site.IsMultiLingual -}}
                &nbsp;|&nbsp;
                <a href="javascript:void(0);" class="menu-item" title="{{ T "selectLanguage" }}">
                    <label for="language-select-desktop">
                        <i class="fas fa-language fa-fw"></i>&nbsp;
                        <select class="language-select" id="language-select-desktop" onchange="location = this.value;">
                            {{- range .Page.AllTranslations -}}
                                {{- $translation := . -}}
                                {{- range $.Site.Languages -}}
                                    {{- if eq $translation.Lang .Lang -}}
                                        {{- if eq $.Page.Lang .Lang -}}
                                            <option value="{{ $translation.RelPermalink }}" selected>{{ .LanguageName }}</option>
                                        {{- else -}}
                                            <option value="{{ $translation.RelPermalink }}">{{ .LanguageName }}</option>
                                        {{- end -}}
                                    {{- end -}}
                                {{- end -}}
                            {{- end -}}
                        </select>
                    </label>
                </a>
            {{- end -}}
            <a href="javascript:void(0);" class="theme-switch" title="{{ T "switchTheme" }}">
                <i class="fas fa-adjust fa-fw "></i>
            </a>
        </div>
    </div>
</header>

{{- /* Mobile header */ -}}
<header class="mobile" id="header-mobile">
    <div class="header-wrapper">
        <div class="header-container">
            <div class="header-title animated bounceIn">
                <a href="{{ `/` | relLangURL }}">
                    {{- .Site.Title -}}
                </a>
            </div>
            <div class="menu-toggle" id="menu-toggle-mobile">
                <span></span><span></span><span></span>
            </div>
        </div>
        <div class="menu" id="menu-mobile">
            {{- $currentPage := . -}}
            {{- range .Site.Menus.main -}}
                <a class="menu-item" href="{{ .URL | relLangURL }}" title="{{ .Title }}">
                    {{- .Pre | safeHTML }}{{ .Name -}}
                </a>
            {{- end -}}
            {{- if .Site.IsMultiLingual -}}
                <a href="javascript:void(0);" class="menu-item" title="{{ T "selectLanguage" }}">
                    <label for="language-select-mobile">
                        <i class="fas fa-language fa-fw"></i>&nbsp;
                        <select class="language-select" id="language-select-mobile" onchange="location = this.value;">
                            {{- range .Page.AllTranslations -}}
                                {{- $translation := . -}}
                                {{- range $.Site.Languages -}}
                                    {{- if eq $translation.Lang .Lang -}}
                                        {{- if eq $.Page.Lang .Lang -}}
                                            <option value="{{ $translation.RelPermalink }}" selected>{{ .LanguageName }}</option>
                                        {{- else -}}
                                            <option value="{{ $translation.RelPermalink }}">{{ .LanguageName }}</option>
                                        {{- end -}}
                                    {{- end -}}
                                {{- end -}}
                            {{- end -}}
                        </select>
                    </label>
                </a>
            {{- end -}}
            <a href="javascript:void(0);" class="theme-switch" title="{{ T "switchTheme" }}">
                <i class="fas fa-adjust fa-fw"></i>
            </a>
        </div>
    </div>
</header>

<script>
    window.desktopHeaderMode = {{ .Site.Params.header.desktopMode }};
    window.mobileHeaderMode = {{ .Site.Params.header.mobileMode }};
</script>