package layout

templ Base(title string) {
	<!DOCTYPE html>
	<html>
		@head(title)
		<body style="margin:0;padding:0;background:#f4f4f4;">
			{ children... }
		</body>
	</html>
}

templ head(title string) {
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
		<title>{ title }</title>
		<style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
            line-height: 1.6;
            color: #333333;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }
        .email-wrapper {
            background-color: #ffffff;
            border-radius: 8px;
            border: 2px solid #dddddd;
            overflow: hidden;
        }
        .email-header {
            background-color: #4A90E2;
            color: #ffffff;
            padding: 30px;
            text-align: center;
        }
        .email-header h1 {
            margin: 0;
            font-size: 24px;
            font-weight: 600;
        }
        .email-body {
            padding: 30px;
        }
        .email-body p {
            margin: 0 0 16px 0;
        }
        .button {
            display: inline-block;
            background-color: #4A90E2;
            color: #ffffff;
            padding: 14px 28px;
            text-decoration: none;
            border-radius: 6px;
            font-weight: 500;
            margin: 20px 0;
        }
        .email-footer {
            background-color: #f8f8f8;
            padding: 20px 30px;
            text-align: center;
            font-size: 12px;
            color: #666666;
        }
        .link-container {
            word-break: break-all;
            font-size: 12px;
            color: #666666;
            background-color: #f8f8f8;
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
        }
    </style>
	</head>
}
