{% macro nested_navigation(navigation_dict, indent_level=0, name="") -%}
{% filter indent(indent_level*4) %}
{% if name %}
<ul aria-hidden="true" aria-expanded="false" aria-label="{{ name }} submenu">
{% else %}
<ul id="menu" aria-expanded="true" aria-label="menu">
{% endif %}
	{% for name,href_or_submenu in navigation_dict.items() %}
	{% if href_or_submenu is mapping %}
	<li class="has-submenu">
		{% if href_or_submenu['self'] %}
		<a href="{{ href_or_submenu['self'] | pyg_urlencode }}" aria-haspopup="true">{{ name }}</a>
		{% else %}
		<span>{{ name }}</span>
		{% endif %}
		<img alt="" aria-hidden="true" src="{{ '/img/caret-down.svg' | pyg_urlencode }}">
		<button class="visually-hidden">Toggle submenu for "{{name}}"</button>
		{{ nested_navigation(href_or_submenu.get("children",href_or_submenu), indent_level=2, name=name) }}
	{% else %}
	<li>
		<a href="{{ href_or_submenu | pyg_urlencode }}">{{ name }}</a>
	{% endif %}
	</li>
	{% endfor %}
</ul>
{%- endfilter %}
{%- endmacro -%}

{% block header %}
<header>
	<section aria-label="site name, description and mobile menu toggle button">
		<a href="{{ '/' | pyg_urlencode }}" aria-label="go to homepage">{{ site_info.name }}</a>
		{% if site_info.subtitle %}
			<p>{{ site_info.subtitle }}</p>
		{% endif %}
	</section>
	<div id="theme-switch" style="display:none;">
        <button id="dark-button" aria-label="switch to dark mode" onclick="sessionStorage.setItem('dark-mode',1);document.documentElement.classList.add('dark');document.documentElement.classList.remove('light');"><img alt="dark" src="{{ '/img/moon.svg' | pyg_urlencode }}"></button>
        <button id="light-button" aria-label="switch to light mode" onclick="sessionStorage.setItem('dark-mode',0);document.documentElement.classList.remove('dark');document.documentElement.classList.add('light');"><img alt="light" src="{{ '/img/sun.svg' | pyg_urlencode }}"></button>
	</div>
    {% if site_info.navigation %}
	<button id="menu-toggle" aria-label="mobile menu toggle"><img alt="" src="{{ '/img/menu-2.svg' | pyg_urlencode }}"></button>
	<nav aria-label="main">
		{{ nested_navigation(site_info.navigation, 2) }}
	</nav>
    {% endif %}
</header>
<script>
	document.getElementById("theme-switch").style.display = "block";
	if (sessionStorage.getItem("dark-mode") == "1") {
		document.documentElement.classList.add('dark');
	} else if (sessionStorage.getItem("dark-mode") == "0") {
		document.documentElement.classList.add('light');
	}
</script>
{%- endblock %}
