<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Dragon Knight</title>
	<link rel="stylesheet" href="/assets/css/basic.css">
	<script src="/assets/scripts/htmx.js"></script>
</head>
<body>
	<header id="basic-header">
		<img src="/assets/img/dk.png" alt="Dragon Knight" width="480">
	</header>

	<main id="basic-main">
		<?= render($view, $data) ?>
	</main>

	<footer id="basic-footer">
		&copy; <?= date('Y') ?> Dragon Knight
	</footer>

	<script type="module">
		import Tooltip from '/assets/scripts/tooltip.js';
		Tooltip.init({
			removalDelay: 0
		});
	</script>

	<script>
		// Get all elements with data-alert-close attribute; when clicked, delete parent element
		document.querySelectorAll('[alert-close]').forEach(function (el) {
			el.addEventListener('click', function () {
				el.parentNode.remove();
			});
		});

		// Get all elements with a data-auto-close attribute; after x seconds, delete the element
		document.querySelectorAll('[auto-close]').forEach(function (el) {
			setTimeout(function () {
				el.remove();
			}, el.getAttribute('auto-close'));
		});
	</script>
</body>
</html>
