{% import "macros.html" as macro %}
<!DOCTYPE html>
<html lang="cs">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>
		{%- block title -%}
			{{ config.title }}
		{%- endblock title -%}
	</title>
	<link rel="stylesheet" href="{{ get_url(path="main.css") | safe }}" type="text/css">
	<link rel="stylesheet" href="{{ get_url(path="icons/remixicon.css") | safe }}" type="text/css">
	{% block styles %}{% endblock styles %}
	<link rel="shortcut icon" type="image/x-icon" href="{{ get_url(path="favicon.ico") }}" />
</head>
<body>
	{% block header %}
		<header class="compact">
			<div class="wrap">
				<a href="{{ config.base_url }}" class="logo"><img src="{{ get_url(path="logo-plain.svg") }}" alt="Logo KITTV"></a>
				<nav class="primary">
					{{ macro::nav_list_items_main(items=config.extra.nav_primary) }}
				</nav>
				<nav class="secondary">
					<i class="ri-search-line"></i>
				</nav>
				<nav class="mobile">
					<div class="buttons">
						<i class="ri-menu-3-line" id="mobile-nav-button"></i>
					</div>
					<div class="floating" id="mobile-nav">
						{{ macro::nav_list_items_main(items=config.extra.nav_primary) }}
					</div>
				</nav>
			</div>
		</header>
	{% endblock header %}
	{% block extra %}{% endblock extra %}
	{% block content %}{% endblock content %}
	<footer>
		<nav>
			{{ macro::nav_list_items(items=config.extra.nav_footer) }}
		</nav>
		<p>Magdalény Rettigové 4, 116 39 Praha 1</p>
		<p>UK PedF KITTV, Praha {{ now() | date(format="%Y") }}</p>
	</footer>
	<script>
		document.getElementById("mobile-nav-button").addEventListener("click", function(){
			this.classList.toggle("ri-menu-3-line");
			this.classList.toggle("ri-close-line");
			document.getElementById("mobile-nav").classList.toggle("visible");
			document.body.classList.toggle("hidden");
		});
	</script>
	{% block javascript %}{% endblock %}
</body>
</html>