<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="/assets/styles/layout.css">
	<link rel="stylesheet" type="text/css" href="/assets/styles/typography.css">
	<link rel="stylesheet" type="text/css" href="/assets/styles/style.css">
	<meta name="format-detection" content="telephone=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="shortcut icon" type="image/x-icon" href="/assets/favicon.ico">
	<link rel="apple-touch-icon" sizes="76x76" href="/assets/apple-touch-icon.png">
	<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
	<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
	<link rel="manifest" href="/site.webmanifest">
	<link rel="mask-icon" href="/assets/safari-pinned-tab.svg" color="#5bbad5">
	<meta name="msapplication-TileColor" content="#ffc40d">
	<meta name="theme-color" content="#000">
	<meta name="keywords" content="">
	<meta name="robots" content="noarchive, noimageindex">

	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<!-- TODO make local-->

{% block title %}
	{%- if page['title'] -%}
		<title>{{ page['title'] }}</title>
	{%- else -%}
		<title>I dont have a title</title>
	{%- endif -%}
{% endblock %}
</head>

<body>
	<main>
		<section>
			{%- block content %}{% endblock -%}
			</section>
			{% block aside %}
				<aside>
					{% macro render_list(name, title) -%}
						{% if documents[name]|length > 0 %}
							<h3>{{ title}}</h3>
							<ul>
								{% for item in documents[name] %}
									<li>
										<a href="/{{ name }}/{{ item['slug'] }}.html">{{ item['title'] }}</a>
									</li>
								{% endfor %}
							</ul>
						{% endif %}
					{%- endmacro %}
					<p>{{ render_list('repair-logs', 'Repair Logs') }}</p>
					<p>{{ render_list('events', 'Events') }}</p>
					{% block footer %}
						<p>Find the code on Klankservers <a target="_blank"
							href="https://code.klank.school/vitrinekast/klank-docs">Git!</a>.</p>
						{% endblock %}
					</aside>
				{% endblock %}
			</main>
			<dialog>
				<img src="" alt="">
				<p></p>
			</dialog>
		</body>
		<script type="text/javascript" src="/assets/app.js"></script>

		</html>