<!DOCTYPE html>
<html lang="{{ locale ?? 'en-US' }}">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<style>
			body {
				font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
				line-height: 1.5;
				font-size: 16px;
				color: #3F4246;
				margin: 0;
				padding: 0;
				font-weight: normal;
			}

			a {
				font-weight: bold;
				color: #00A6FB;
				text-decoration: none;
			}

			a:hover {
				text-decoration: underline;
			}

			.container {
				max-width: 512px;
				margin: 0 auto;
				padding: 32px;
				border-radius: 16px;
				background-color: #FFFFFF;
				border: 1px solid #E3E4E4;
			}

			.logo {
				margin-bottom: 24px;
			}

			.logo img {
				display: block;
				max-width: 120px;
				height: auto;
			}

			.footer {
				margin-top: 18px;
			}

			.address {
				padding-top: 18px;
				border-top: 1px solid #F5F6F6;
				font-size: 12px;
				color: #ACAEAF;
			}


			.button,
			a.button {
				display: inline-block;
				background: #3F4246;
				color: #ffffff;
				padding: 12px 24px;
				border-radius: 8px;
				text-decoration: none;
				font-weight: bold;
			}

			.button:hover,
			a.button:hover {
				text-decoration: none;
			}

			@media(min-width: 600px) {
				logo img {
					max-width: 136px;
				}

				.container {
					padding: 64px;
					border-radius: 24px;
				}

				.logo {
					margin-bottom: 56px;
				}

				.footer {
					margin-top: 24px;
				}

				.address {
					padding-top: 24px;
				}

				.button,
				a.button {
					border-radius: 12px;
				}
			}
		</style>
	</head>

	<body>
		<div class="container">
			{% if option.brand.alternative_logo is defined and option.brand.alternative_logo is not empty %}
				{% set link = option.site.domain is defined and option.site.domain is not empty ? ((option.site.is_secure is defined and option.site.is_secure ? 'https://' : 'http://') ~ option.site.domain) : '#' %}

				<div class="logo">
					<a href="{{ link }}">
						<img src="{{ link ~ option.brand.alternative_logo }}" alt="{{ option.site.name ?? 'Logo' }}">
					</a>
				</div>
			{% endif %}

			{% block content %}
				{# Email content #}
			{% endblock %}

			{% if option.business.address is defined and option.business.address is not empty %}
				<footer class="footer">
					<div class="address">
						{% if option.business.name is defined and option.business.name is not empty %}
							<strong>{{ option.business.name }}</strong>
							<br/>
						{% endif %}

						{{ option.business.address }}
					</div>
				</footer>
			{% endif %}
		</div>
	</body>
</html>
