<!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/table.css">
	<link rel="stylesheet" type="text/css" href="/assets/styles/style.css">
	<link rel="stylesheet" type="text/css" href="/assets/styles/paged.css">
	<link rel="stylesheet" type="text/css" href="/assets/styles/media.css">

	<link rel="stylesheet" type="text/css" href="/assets/styles/paged-interface.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="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">


	<script src="/assets/paged.polyfill.js"></script>
	<script>
		class MyHandler extends Paged.Handler {
			constructor(chunker, polisher, caller) {
				super(chunker, polisher, caller);
			}
			afterRendered(pages) {
				let storedTHead = []
				pages.forEach((p) => {
					p.element.querySelectorAll("table:has(thead)").forEach((th) => {
						storedTHead.push(th);
					});

					p.element.querySelectorAll("table:not(:has(thead))").forEach((table) => {
						let splitFrom = table.getAttribute("data-split-from");
						let matchedHead = storedTHead.filter((th) => {

							return th.getAttribute("data-split-to") === splitFrom;
						})[0]

						if (matchedHead) {
							let head = matchedHead.querySelector("thead").cloneNode(true);

							if (head) {
								table.appendChild(head);
							}
						}
					})

					p.element.querySelectorAll(".sample").forEach((el) => {
						el.addEventListener("click", function(e) {
							const audioEl = e.currentTarget.querySelector("audio");
							if (audioEl.paused) {
								document.querySelectorAll(".sample").forEach((s) => {
									s.removeAttribute("active");
									s.querySelector("audio").pause();
								})
								e.currentTarget.setAttribute("active", true)
								audioEl.play();
							} else {
								audioEl.pause();
								e.currentTarget.removeAttribute("active")

							}
						})
					})
				})

			}
			afterPreview() {
				const scrollY = localStorage.getItem('scrollY');
				if (scrollY !== null) window.scrollTo(0, parseInt(scrollY));
			}
			beforeParsed(content) {

				let count = 0;
				content.querySelectorAll(`a[role="doc-noteref"]`).forEach((ref) => {
					count += 1;
					const href = ref.getAttribute("href");
					let note = content.querySelector(".footnotes " + href);
					if (note) {
						ref.querySelector("sup").textContent = count;
						note.setAttribute("count", ref.querySelector("sup").textContent);
						ref.appendChild(note);
					}
				})

				let filter = [];
				let bib = content.querySelector('[template-type="bib"]');
				if (bib) {
					content.querySelectorAll(".csl-entry").forEach((e) => {
						console.log(e)
						if (filter.indexOf(e.id) == -1) {
							filter.push(e.id);
							bib.appendChild(e);
						} else {
							e.parentNode.removeChild(e);
						}
					})
				}
				content.querySelectorAll("#footnotes, #refs").forEach((f) => {
					f.parentNode.removeChild(f);
				})
			}
		}
		Paged.registerHandlers(MyHandler);

		// Save scroll position before unloading the page
		window.addEventListener('beforeunload', () => {
			localStorage.setItem('scrollY', window.scrollY);
		});

		// Restore scroll position on load
		window.addEventListener('load', () => {

		});
	</script>
	{% block title %}
	{%- if page['title'] -%}
	<title>{{ page['title'] }} {%- if documents['meta'] -%}{{documents['meta']['version']}} - {{documents['meta']['now']}}{%- endif -%}</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>
		<p></p>
	</dialog>
	<script type="text/javascript" src="/assets/app.js"></script>
</body>


</html>
