<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Password recovery</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<style>
			/* Client resets */
			body,
			table,
			td,
			a {
				-webkit-text-size-adjust: 100%;
				-ms-text-size-adjust: 100%;
			}
			table,
			td {
				mso-table-lspace: 0;
				mso-table-rspace: 0;
				border-collapse: collapse !important;
			}
			img {
				-ms-interpolation-mode: bicubic;
				border: 0;
				height: auto;
				line-height: 100%;
				outline: none;
				text-decoration: none;
			}
			/* Base */
			body {
				margin: 0;
				padding: 0;
				width: 100% !important;
				background: #f5f5f7;
			}
			.wrapper {
				width: 100%;
				background: #f5f5f7;
				padding: 24px 0;
			}
			.container {
				width: 100%;
				max-width: 600px;
				margin: 0 auto;
				background: #ffffff;
				border-radius: 16px;
				overflow: hidden;
				box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
			}
			.header {
				padding: 28px 28px 8px;
				text-align: left;
			}
			.brand {
				font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
				font-size: 18px;
				font-weight: 600;
				color: #111111;
				letter-spacing: 0.2px;
			}
			.preheader {
				display: none;
				font-size: 1px;
				color: #ffffff;
				line-height: 1px;
				max-height: 0;
				max-width: 0;
				opacity: 0;
				overflow: hidden;
			}
			.content {
				padding: 0 28px 4px;
				font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
				color: #111111;
			}
			.h1 {
				font-size: 22px;
				font-weight: 700;
				margin: 8px 0 4px;
				line-height: 1.3;
			}
			.sub {
				font-size: 13px;
				color: #6e6e73;
				margin: 0 0 16px;
			}
			.p {
				font-size: 16px;
				line-height: 1.55;
				margin: 0 0 16px;
			}
			.code-wrap {
				margin: 24px 0 16px;
			}
			.code {
				font-family: SFMono-Regular, Menlo, Consolas, monospace;
				font-size: 28px;
				letter-spacing: 2px;
				font-weight: 700;
				text-align: center;
				padding: 16px 20px;
				border: 1px solid #e5e5ea;
				border-radius: 12px;
				background: #fbfbfd;
			}
			.meta {
				font-size: 13px;
				color: #6e6e73;
				margin: 12px 0 0;
			}
			.divider {
				height: 1px;
				background: #e5e5ea;
				margin: 24px 0;
			}
			.notice {
				font-size: 13px;
				color: #6e6e73;
			}
			.footer {
				padding: 20px 28px 28px;
				text-align: left;
				font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
				color: #6e6e73;
				font-size: 12px;
			}
			@media(prefers-color-scheme: dark) {
				body {
					background: #000000;
				}
				.wrapper {
					background: #000000;
				}
				.container {
					background: #1c1c1e;
					box-shadow: none;
				}
				.brand,
				.h1,
				.p,
				.code {
					color: #ffffff !important;
				}
				.sub,
				.meta,
				.notice,
				.footer {
					color: #a1a1a6 !important;
				}
				.code {
					background: #2c2c2e;
					border-color: #3a3a3c;
				}
				.divider {
					background: #3a3a3c;
				}
			}
		</style>
	</head>
	<body>
		<span class="preheader">Your verification code:
			{{ code }}. Valid for 15 minutes.</span>
		<div class="wrapper">
			<table role="presentation" class="container" cellpadding="0" cellspacing="0" width="100%">
				<tr>
					<td class="header">
						<img src="{{ iconBase64 }}" width="64" height="64" style="border-radius:20px; display:block;">

					</td>
				</tr>
				<tr>
					<td class="content">
						<div class="h1">Password recovery</div>
						<div class="sub">Восстановление пароля</div>

						<p class="p">
							You requested to recover your password. To continue, enter this confirmation code:
							<br><span class="ru">Вы запросили восстановление пароля. Для продолжения введите этот код подтверждения:</span>
						</p>

						<div class="code-wrap">
							<div class="code">{{ code }}</div>
						</div>

						<p class="p">
							This code is valid for 15 minutes.
							<br><span class="ru">Этот код действителен в течение 15 минут.</span>
						</p>

						<div class="divider"></div>

						<p class="p">
							<strong>Security details</strong><br>
							Request IP:
							{{ requestIp }}<br>
							<span class="ru">IP-адрес запроса:
								{{ requestIp }}</span>
						</p>

						<p class="notice">
							If you did not request a password recovery, you can safely ignore this email.
							<br><span class="ru">Если вы не запрашивали восстановление пароля, просто проигнорируйте это письмо.</span>
						</p>
					</td>
				</tr>
				<tr>
					<td class="footer"></td>
				</tr>
			</table>
		</div>
	</body>
</html>
