package pages

// Head defines a template function for the HTML <head> section.
// It sets the page title, description, viewport settings for responsive design,
// includes the main JavaScript module, sets the character encoding to UTF-8,
// and links the favicon image.
templ Head(title, description string) {
	<head>
		<title>{ title }</title>
		<meta name="description" content={ description }/>
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<script type="module" src="/public/bundles/bundle.js"></script>
		<link rel="stylesheet" href="/public/bundles/bundle.css"/>
		<meta charset="UTF-8"/>
		<link rel="shortcut icon" href="/public/htmx.svg"/>
	</head>
}

// App is the main template that structures the HTML document.
// It defines the document type, the language of the document, includes the Head component,
// and defines the body of the document with a div container where the page content will be injected.
templ App(page templ.Component, lang, title, description string) {
	<!DOCTYPE html>
	<html lang={ lang }>
		@Head(title, description)
		<body>
			<div id="app">
				@page
			</div>
		</body>
	</html>
}
