<!doctype html>
<html class="w-full h-full" {{ if .lang }}lang="{{ .lang }}"{{ end }}>
	<head>
		<meta charset="UTF-8" />

		{{ block "head" . }}
			<!-- Default Head elements -->
		{{ end }}

		{{ if .isDev }}
			<link rel="icon" href="/assets/logo/dev_favicon.png" />
		{{ else }}
			<link rel="icon" href="/assets/logo/favicon.png" />
		{{ end }}


		<link href="/assets/css/remixicon.css" rel="stylesheet" />
		<script src="/assets/js/alpine.min.js" defer></script>
		<script src="/assets/js/htmx.min.js" defer></script>
		<script src="/assets/js/htmx-response-targets.js" defer></script>
		<script src="/assets/js/client-side-templates.js" defer></script>

		<link rel="stylesheet" type="text/css" href="/assets/css/fonts.css" />
		<link rel="stylesheet" type="text/css" href="/assets/style.css" />

		<script type="module">
			import { setup } from "/assets/scripts.js";
			setup();
		</script>
	</head>

	<body class="w-full" hx-ext="response-targets" hx-boost="true">
		<div class="flex flex-col min-h-screen">
			<!-- Header and menu with constrained width -->
			{{ template "_header" . }}


			<!-- Main content with full width -->
			<main class="flex-1 w-full">
				{{ block "body" . }}
					<!-- Default app body... -->
				{{ end }}
			</main>

			<!-- Footer with constrained width -->
			<div class="container max-w-(--breakpoint-2xl) mx-auto">
				<footer>
					{{ block "_footer" . }}
					{{ end }}
				</footer>
			</div>
		</div>

		{{ EmbedXSLT "xslt/transform-citation.xsl" }}
	</body>
</html>
