package pkg

templ basicTemplate() {
	<!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>
			<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 {
         			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>
		</head>
		<bod>
			{ children... }
		</bod>
	</html>
}

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

templ htmlTemplate(html string) {
	@basicTemplate() {
		@templ.Raw(html)
	}
}

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

templ deviceInfoTemplate(ip string, mac string, showQR bool) {
	@basicTemplate() {
		<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>
	}
}

templ startScreenTemplate(splashScreenHtml string, ip string, mac string, qrPath string) {
	@basicTemplate() {
		<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 qrPath != "" {
				<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={ "file://" + qrPath }
							alt="QR-Code"
						/>
					</div>
				</div>
			}
		</div>
		@templ.Raw(splashScreenHtml)
		<style>
			:root {
    			--splash-bg: transparent !important;
    			--splash-fade-out-state: paused !important;
                --background-color: oklch(21.6% 0.006 56.043);
			}
		</style>
	}
}
