<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>{{ title }}</title>
	<link rel="stylesheet" href="/public/css/buttons.css">
	<link rel="stylesheet" href="/public/css/admin.css">
	<script src="/public/scripts/jquery.js"></script>
</head>
<body>
	<div id="admin-container">
		<header>
			<h1>Dragon Knight</h1>
			<h3 id="subtitle">{{ title }}</h3>
		</header>
		<main>
			<nav>
				<div class="group">
					<a class="ui button secondary" href="/admin">Dashboard</a>
					<a class="ui button secondary" href="/">Back to Game</a>
				</div>

				<div class="group">
					<a class="ui button secondary" href="/admin/config">Config</a>
					<a class="ui button secondary" href="/admin/news">News</a>
					<a class="ui button secondary" href="/admin/users">Users</a>
				</div>

				<div class="group">
					<a class="ui button secondary" href="/admin/items">Items</a>
					<a class="ui button secondary" href="/admin/drops">Drops</a>
					<a class="ui button secondary" href="/admin/towns">Towns</a>
					<a class="ui button secondary" href="/admin/monsters">Monsters</a>
					<a class="ui button secondary" href="/admin/spells">Spells</a>
				</div>
			</nav>

			<section id="main">
				{{{ content }}}
			</section>
		</main>

		<footer>
			<div>Powered by <a href="/" target="_new">Dragon Knight</a></div>
			<div>&copy; 2024 Sharkk</div>
			<div>Version {{ version }} {{ build }}</div>
		</footer>
	</div>

	<script>
		function setupNavigation() {
			const $navLinks = $('nav a')

			$navLinks.on('click', function(e) {
				e.preventDefault()
				const url = this.getAttribute('href')
				const $this = $(this)

				$navLinks.removeClass('primary').addClass('secondary')
				$this.removeClass('secondary').addClass('primary')

				$.get({
					url: url,
					headers: { 'X-DK-AJAX': '1' },
					dataType: 'json'
				}).done(function(response) {
					$('#main').html(response.html)
					document.title = response.title
					$('#subtitle').text(response.title)
					history.pushState(null, '', url)
				}).fail(function() {
					$this.removeClass('primary').addClass('secondary')
				})
			})
		}

		$(document).ready(function() {
			const currentPath = window.location.pathname;
			const links = $('nav a').get().sort((a, b) => b.getAttribute('href').length - a.getAttribute('href').length)

			for (const link of links) {
				if (currentPath.startsWith(link.getAttribute('href'))) {
					$(link).removeClass('secondary').addClass('primary')
					break
				}
			}

			setupNavigation()
		})
	</script>
</body>
</html>
