<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Email confirmation</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:0pt; mso-table-rspace:0pt; 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 confirmation 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">Email confirmation</div>
      <div class="sub">Подтверждение email</div>

      <p class="p">
        To confirm your email address, 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 this change and received this email by mistake, ignore it.
        <br><span class="ru">Если вы не запрашивали смену email и получили это письмо по ошибке, проигнорируйте его.</span>
      </p>
    </td></tr>
    <tr><td class="footer">
      
    </td></tr>
  </table>
</div>
</body>
</html>
