package web

templ indexTemplate() {
	<!DOCTYPE html>
	<html lang="en">
		<head>
			<meta charset="UTF-8"/>
			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
			<title>PLG MuDiCS Display</title>
			<script src="/static/htmx.min.js"></script>
			<script src="/static/htmx-ext-sse.min.js"></script>
			<style>
		:root {
			--background-color: black;
			--foreground-color: oklch(92.3% 0.003 48.717);
			--font-size: 5rem;
		}

		body {
			display: flex;
			justify-content: center;
			/* centers horizontally */
			align-items: center;
			/* centers vertically */
			width: 100vw;
			/* Viewport width */
			height: 100vh;
			/* Viewport height */
			margin: 0;
			padding: 0;
			overflow: hidden;
			background-color: var(--background-color);
			color: var(--foreground-color);
			font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
			cursor: none;
		}

		video,
		img,
		iframe {
			width: 100vw;
			/* Viewport width */
			height: 100vh;
			/* Viewport height */
			object-fit: contain;
		}

		p,
		li {
			font-size: var(--font-size);
			line-height: 1.2;
			text-wrap: balance;
			max-width: 90vw;
			word-break: break-word;
			margin: 0 0 calc(var(--font-size) * 0.4) 0;
		}

		ul,
		ol {
			padding-left: calc(var(--font-size)*1.5);
		}
	</style>
			<script>
		document.addEventListener('keydown', function (event) {
			if (event.code === 'Space') {
				event.preventDefault();
				var video = document.querySelector('video');
				if (video) {
					if (video.paused) {
						video.play();
					} else {
						video.pause();
					}
				}
			}
		});
	</script>
		</head>
		<bod>
			<div hx-get="/splash" hx-trigger="load"></div>
			<main hx-ext="sse" sse-connect="/sse" sse-swap="message"></main>
		</bod>
	</html>
}

templ videoTemplate(path string) {
	<video autoplay>
		<source src={ "/api/file/" + path } type="video/mp4"/>
	</video>
}

templ imageTemplate(path string) {
	<img src={ "/api/file/" + path }/>
}

templ deviceInfoTemplate(ip string, mac string, showQR bool) {
	<div style="width: 100vw; height: 100vh; display: flex; flex-direction: row; justify-content: space-between;">
		<div
			style="display: flex; flex-direction: column; gap: 1rem; justify-content: end; padding: 2rem; font-size: 4rem;"
		>
			{ ip }
			<span style="text-transform: uppercase;">{ mac }</span>
		</div>
		if showQR {
			<div style="display: flex; justify-content: end; align-items: end; padding: 2rem;">
				<div style="padding: 1rem; background-color: var(--foreground-color); border-radius: 1rem;">
					<img
						style="height: 30vh; width: auto; image-rendering: pixelated; image-rendering: crisp-edges;"
						src={ "/qr?data=http://" + ip + ":8080" }
						alt="QR-Code"
					/>
				</div>
			</div>
		}
	</div>
	<style>
	:root {
		--splash-bg: transparent !important;
		--splash-fade-out-state: paused !important;
		--background-color: oklch(21.6% 0.006 56.043);
	}
</style>
}
