package layouts

import (
	"git.schreifuchs.ch/schreifuchs/schreifuchs.ch/internal/components/translate"
	"git.schreifuchs.ch/schreifuchs/schreifuchs.ch/internal/pkg/config"
	"git.schreifuchs.ch/schreifuchs/schreifuchs.ch/internal/pkg/templer"
	"strings"
)

templ Head(cfg config.Cfg, title string) {
	<head>
		<meta charset="UTF-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
		<title>{ title }</title>
		<link rel="icon" type="image/png" href="/favicon.png"/>
		<link fetchpriority="high" href="/css/output.css" rel="stylesheet"/>
		<script src="/js/htmx.min.js"></script>
		<script src="/js/head-support.min.js"></script>
		<script src="/js/preload.min.js"></script>
		<script src="/js/preload-links.min.js"></script>
		<script src={ cfg.Tracking.ScriptSrc } data-website-id={ cfg.Tracking.WebsiteID }></script>
		for _, h := range templer.GetHeader(ctx) {
			@templ.Raw(h)
		}
	</head>
	{ children... }
}

templ Base(cfg config.Cfg, title string) {
	<!DOCTYPE html>
	<html lang={ translate.Language(ctx) }>
		@Head(cfg, title)
		<body class="bg-black dark" hx-boost="true" hx-target="main" hx-ext="head-support,preload,preload-links">
			<header
				class="fixed z-50 mix-blend-difference p-1 w-full flex justify-between items-start"
			>
				<a class="text-white text-2xl" href={ translate.Path(ctx, "") } preload="mouseover" preload-images="true">schreifuchs.ch</a>
				<nav class="flex gap-2 p-2">
					for _, lang := range translate.SupportedLanguages(ctx) {
						<a
							href={ translate.PathForLang(ctx, lang, strings.Split(templer.Path(ctx), "/")...) }
							hreflang={ lang }
							data-no-translate
							preload="mouseover"
							class="text-white hover:underline uppercase"
						>
							{ lang }
						</a>
					}
				</nav>
			</header>
			<main class="text-white">
				{ children... }
			</main>
		</body>
	</html>
}
