<!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/dragon.css">
	<script src="/assets/scripts/htmx.js"></script>
</head>
<body>
	<header id="main-header">
		<div class="left">
			<h1>Dragon Knight</h1>
		</div>

		<div class="right">
			<?php if (user()): ?>
				<p>Welcome, <?= user()->username ?></p>
				<?= c_logout_button() ?>
			<?php else: ?>
				<a class="ui button primary" href="/auth/login">Login</a>
				<a class="ui button secondary" href="/auth/register">Register</a>
			<?php endif; ?>
		</div>
	</header>

	<main>
		<aside id="left">
			<?php if (user() && user()->char_id > 0) echo c_left_nav($activeTab ?? 0); ?>
		</aside>

		<div id="center">
			<?= render($view, $data) ?>
		</div>

		<aside id="right">
			<?php if (user() && user()->char_id > 0) echo c_right_nav(); ?>
		</aside>
	</main>

	<footer>
		<p>&copy; <?= date('Y') ?> Dragon Knight</p>
		<p>q<?= $GLOBALS['queries'] ?></p>
		<p>qt<?= number_format($GLOBALS['query_time'], 3) ?></p>
		<p>t<?= number_format((microtime(true) - START_TIME), 3) ?></p>
		<p>v<?= env('version') ?></p>
	</footer>

	<?php
		if (env('debug', false)) {
			echo c_debug_query_log();
		}
	?>

	<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>
