{{- define "feathericon" -}}
  {{- $featherURL := "https://unpkg.com/feather-icons@4.29.2/dist/feather-sprite.svg" -}}
  {{ if not (.UseCDN | default false) -}}
    {{- $featherURL = (resources.Get "svg/feather-sprite.svg" | fingerprint).RelPermalink -}}
  {{- end -}}
<svg class="feather">
   <use href="{{ printf "%s#%s" $featherURL .Icon }}" />
</svg>
{{- end -}}

<header>
	<div class="main">
		{{ if eq .Site.Language.Lang "de" -}}
		<a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
		{{ else -}}
		<a href="{{ .Site.BaseURL }}en/">{{ .Site.Title }}</a>
		{{ end }}
	</div>
	<nav>
		{{ range .Site.Menus.main }}
		<a href="{{ .URL }}">{{ .Name }}</a>
		{{ end }}
		{{ if eq .Site.Params.mode "toggle" -}}
		| <span id="dark-mode-toggle" onclick="toggleTheme()">{{template "feathericon" (dict "UseCDN" .Site.Params.useCDN "Icon" "sun") }}</span>
		<script src="{{ absURL "js/themetoggle.js" }}"></script>
		{{ end }}
		<!-- Sprachumschalter -->
		{{ if eq .Site.Language.Lang "de" -}}
		| <a href="{{ .Site.BaseURL }}en/">EN</a>
		{{ else -}}
		| <a href="{{ .Site.BaseURL }}">DE</a>
		{{ end }}
		| <button id="toggle-search" onclick="toggleSearch()" aria-label="Toggle Search">
			{{ template "feathericon" (dict "UseCDN" .Site.Params.useCDN "Icon" "search") }}
		</button>
	</nav>
</header>

<div id="search" style="display: none;"></div>

<script>
	function toggleSearch() {
		const searchField = document.getElementById('search');
		searchField.style.display = searchField.style.display === 'none' ? 'block' : 'none';
	}
</script>