<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Presentation Timer</title>
		<link rel="stylesheet" href="pyradium.css" />
		<link rel="stylesheet" href="pyradium_menu.css" />
		<link rel="stylesheet" href="pyradium_timer.css" />
	</head>
	<body>
		<div class="menu">
			Presentation Timeslot:
			<input type="text" value="" id="total_presentation_time" class="control" style="width: 250px" />
			Pause Time (mins):
			<input type="text" value="" id="pause_minutes" class="control" />
		</div>
		<div class="belowmenu">
			<div class="topgrid">
				<div class="top">
					Presentation Mode
				</div>
				<div class="bottom">
					<div id="presentation_mode"></div>
				</div>

				<div class="top">
					Active Presentation Time
				</div>
				<div class="bottom">
					<div id="spent_time"></div>
				</div>

				<div class="top">
					Time for Slide
				</div>
				<div class="bottom">
					<div id="slide_time_allocation"></div>
				</div>

				<div class="top">
					Time used for Slide
				</div>
				<div class="bottom">
					<div id="slide_time_used"></div>
				</div>

				<div class="top">
					Remaining Time
				</div>
				<div class="bottom">
					<div id="remaining_time"></div>
				</div>
			</div>
		</div>

		<div class="main_indicator" id="main_indicator">
			<div id="slide_time_remaining"></div>
		</div>

		<script type="module">
			import {PresentationTimer} from "./pyradium_timer.js";

			const ui_elements = {
				"main_indicator":			document.querySelector("#main_indicator"),
				"total_presentation_time":	document.querySelector("#total_presentation_time"),
				"pause_minutes":			document.querySelector("#pause_minutes"),
				"presentation_mode":		document.querySelector("#presentation_mode"),
				"spent_time":				document.querySelector("#spent_time"),
				"slide_time_allocation":	document.querySelector("#slide_time_allocation"),
				"slide_time_used":			document.querySelector("#slide_time_used"),
				"slide_time_remaining":		document.querySelector("#slide_time_remaining"),
				"remaining_time":			document.querySelector("#remaining_time"),
			};
			const pt = new PresentationTimer(ui_elements);
		</script>
	</body>
</html>
