<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		%if presentation.meta.get("author") is not None:
		<meta name="author" content="${presentation.meta.get("author")}" />
		%endif
		<meta name="generator" content="https://github.com/johndoe31415/pyradium v${pyradium_version}" />
		<title>${presentation.meta.get("title", "Untitled Presentation")}</title>
		%for css_filename in rendered_presentation.css:
		<link rel="stylesheet" href="${css_filename}" />
		%endfor
	</head>

	<body>
%if renderer.rendering_params.presentation_mode.name == "Interactive":
		<div class="menu">
			<input type="text" disabled="1" value="1" id="current_slideno" class="control" />
			<button id="btn_goto_slide" class="control">Goto</button>
			%if rendered_presentation.has_feature("timer"):
			<button id="btn_timer" class="control">Timer</button>
			<button id="btn_present" class="control">Start Presentation</button>
			%endif
		</div>
%endif

		<div class="belowmenu">
		%for slide in rendered_presentation.rendered_slides:
		${slide | n}
		%endfor
		</div>

%if renderer.rendering_params.presentation_mode.name == "Interactive":
		<div id="full_screen_div" class="fullscreen size_container" style="display: none;"></div>

		<script type="module">
			import {Presentation} from "./template/base/pyradium.js";
			const presentation_meta = ${rendered_presentation.meta_json | n};
			const ui_elements = {
				"slides":			document.querySelectorAll("div.slide"),
				"slideno_text":		document.querySelector("#current_slideno"),
				"full_screen_div":	document.querySelector("#full_screen_div"),
			};
			const presentation = new Presentation(ui_elements, presentation_meta);
			document.querySelector("#btn_goto_slide").addEventListener("click", (event) => presentation.goto_slide());
			document.querySelector("#btn_present").addEventListener("click", (event) => presentation.start_presentation());
			document.addEventListener("wheel", (event) => presentation.event_wheel(event));
			document.addEventListener("fullscreenchange", (event) => presentation.event_fullscreen(event));
			document.addEventListener("keypress", (event) => presentation.event_keypress(event));
			document.addEventListener("keydown", (event) => presentation.event_keydown(event));
			%if rendered_presentation.has_feature("timer"):
			document.querySelector("#btn_timer").addEventListener("click", (event) => window.open("template/base/timer.html"));
			%endif
		</script>
%endif
	</body>
</html>
