package views

templ AuthPage(content templ.Component) {
	<!DOCTYPE html>
	<html lang="en" class="light">
		<head>
			<meta charset="UTF-8"/>
			<link rel="icon" type="image/png" sizes="32x32" href="/pwa-icons/favicon-32x32.png"/>
			<link rel="icon" type="image/png" sizes="16x16" href="/pwa-icons/favicon-16x16.png"/>
			<link rel="apple-touch-icon" sizes="180x180" href="/pwa-icons/apple-touch-icon-180x180.png"/>
			<link rel="manifest" href="/manifest.webmanifest"/>
			<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"/>
			<meta name="theme-color" content="#1e1b2e"/>
			<meta name="apple-mobile-web-app-capable" content="yes"/>
			<meta name="apple-mobile-web-app-status-bar-style" content="default"/>
			<title>XTablo</title>
			<script src="https://cdn.jsdelivr.net/npm/htmx.org@4.0.0-beta2/dist/htmx.min.js"></script>
			<link rel="stylesheet" href="/static/tailwind.css"/>
			<link rel="stylesheet" href="/static/styles.css"/>
		</head>
		<body>
			<div id="root">
				<section aria-label="Notifications alt+T" tabindex="-1" aria-live="polite" aria-relevant="additions text" aria-atomic="false"></section>
				<div class="app-shell">
					<div class="login-screen">
						@AnimatedBackground()
						<div class="card-wrap">
							<div class="card-glow"></div>
							<div data-testid="auth-card-shell" class="auth-card-shell">
								<div class="auth-card-topbar">
									<div>
										<a href="https://www.xtablo.com" class="back-home-link">
											<svg class="back-home-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
												<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
											</svg>
											Retour à l'accueil
										</a>
									</div>
									<button class="theme-toggle-button" aria-label="change theme (system)" type="button">
										<svg xmlns="http://www.w3.org/2000/svg" class="theme-toggle-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
											<rect width="20" height="14" x="2" y="3" rx="2"></rect>
											<line x1="8" x2="16" y1="21" y2="21"></line>
											<line x1="12" x2="12" y1="17" y2="21"></line>
										</svg>
									</button>
								</div>
								<div class="brand-header">
									<img alt="Xtablo" class="brand-logo light-only" src="/logo_dark.png"/>
									<img alt="Xtablo" class="brand-logo dark-only" src="/logo_white.png"/>
								</div>
								@content
							</div>
						</div>
					</div>
				</div>
			</div>
		</body>
	</html>
}

templ LoginPage() {
	@AuthPage(LoginScreen())
}

templ SignupPage() {
	@AuthPage(SignupScreen())
}
