{{ $currentPage := . }}

{{/* TODO: maybe move somewhere else */}}
{{/* Svg symbols that can be calls through html with <use> */}}
<div class="svg-symbols">
	{{ partial "svg/inline-svg" "symbols"}}
</div>
{{/* Decoration svg shapes for header and background */}}
{{ partial "decoration_shapes" $currentPage.Params.decotype }}

<div class="header-container shadow-container">
	<header role="banner" class="wrapper">
		<div>
			<a href="{{ `/` | relLangURL }}" class="logo" title="Retour à la page d'accueil"
				>{{- $logoResource := resources.Get "images/logo.svg" -}}
				<img
					src="{{- $logoResource.RelPermalink -}}"
					width="132"
					height="36"
					alt="Logo ecoIndex, retour à la page d'accueil"
			/></a>
			<div class="menu-btn-container" hidden>
				<div class="with-icon-l">
					<button class="menu-btn" aria-expanded="false">
						<svg class="icon-l" focusable="false" viewBox="0 0 30 30" stroke="currentColor" width="1em" height="1em">
							<path d="M3,3 27,3 M3,15 27,15 M3,27 27,27"></path>
						</svg>
						Menu
					</button>
				</div>
			</div>
			<nav role="navigation" class="main-nav-container" data-open="false" aria-labelledby="main-nav-label">
				<div>
					<span id="main-nav-label" hidden>Navigation principale</span>
					<div class="cluster-l">
						<ul class>
							{{ range .Site.Menus.main }}
								{{- if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) -}}
									<li><span aria-current="page">{{ .Name }}</span></li>
								{{- else -}}
									<li><a href="{{- .URL | safeHTMLAttr -}}">{{ .Name }}</a></li>
								{{- end -}}
							{{- end -}}
						</ul>
					</div>
					<div class="cluster-l">
						<ul class>
							{{ range .Site.Menus.extra }}
								{{- if or ($currentPage.IsMenuCurrent "extra" .) ($currentPage.HasMenuCurrent "extra" .) -}}
									<li><span aria-current="page">{{ .Name }}</span></li>
								{{- else -}}
									<li><a href="{{- .URL | safeHTMLAttr -}}">{{ .Name }}</a></li>
								{{- end -}}
							{{- end -}}
						</ul>
					</div>
					{{- partial "header/language_switcher" . }}
				</div>
			</nav>
		</div>
	</header>
</div>