package templates

templ ErrorPage(message string, errorType string) {
	<!DOCTYPE html>
	<html lang="en">
		<head>
			<meta charset="UTF-8">
			<meta name="viewport" content="width=device-width, initial-scale=1.0">
			<title>Error - Bookhoard</title>
			<style>
				* {
					margin: 0;
					padding: 0;
					box-sizing: border-box;
				}
				body {
					font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
					background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
					min-height: 100vh;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #eee;
				}
				.error-container {
					text-align: center;
					padding: 2rem;
					max-width: 500px;
				}
				.error-icon {
					font-size: 4rem;
					margin-bottom: 1rem;
				}
				.error-title {
					font-size: 1.5rem;
					font-weight: 600;
					margin-bottom: 1rem;
					color: #fff;
				}
				.error-message {
					font-size: 1rem;
					color: #ccc;
					margin-bottom: 2rem;
					line-height: 1.6;
				}
				.error-actions {
					display: flex;
					gap: 1rem;
					justify-content: center;
					flex-wrap: wrap;
				}
				.btn {
					padding: 0.75rem 1.5rem;
					border-radius: 0.5rem;
					text-decoration: none;
					font-weight: 500;
					transition: all 0.2s;
					border: none;
					cursor: pointer;
					font-size: 0.95rem;
				}
				.btn-primary {
					background: #7aa2f7;
					color: #1a1b26;
				}
				.btn-primary:hover {
					background: #89b4fa;
				}
				.btn-secondary {
					background: transparent;
					color: #7aa2f7;
					border: 1px solid #7aa2f7;
				}
				.btn-secondary:hover {
					background: rgba(122, 162, 247, 0.1);
				}
			</style>
		</head>
		<body>
			<div class="error-container">
				<div class="error-icon">⚠️</div>
				<h1 class="error-title">Something went wrong</h1>
				<p class="error-message">{message}</p>
				<div class="error-actions">
					<a href="/dashboard" class="btn btn-primary">Try Again</a>
					<a href="/" class="btn btn-secondary">Go Home</a>
				</div>
			</div>
			<div style="display:none;" id="error-debug-info">Error type: { errorType }</div>
		</body>
	</html>
}
