<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Confirm Registration</title>
    <style>
      body {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
          line-height: 1.6;
          margin: 0;
          padding: 20px;
          background-color: {{tenant.backgroundColor}};
      }
      .container {
          max-width: 600px;
          margin: 0 auto;
          background: white;
          border-radius: 8px;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
          overflow: hidden;
      }
      .header {
          background-color: {{tenant.primaryColor}};
          color: white;
          padding: 30px;
          text-align: center;
      }
      .logo {
          color: white;
          font-size: 24px;
          font-weight: bold;
          margin-bottom: 10px;
      }
      .content {
          padding: 30px;
      }
      .confirmation-code {
          background-color: #f8f9fa;
          border: 2px solid {{tenant.primaryColor}};
          border-radius: 8px;
          padding: 20px;
          text-align: center;
          margin: 20px 0;
      }
      .code {
          font-family: 'Courier New', monospace;
          font-size: 32px;
          font-weight: bold;
          color: {{tenant.primaryColor}};
          letter-spacing: 4px;
          margin: 10px 0;
      }
      .footer {
          background-color: #f8f9fa;
          padding: 20px;
          text-align: center;
          font-size: 14px;
          color: #666;
      }
      .footer a {
          color: {{tenant.primaryColor}};
          text-decoration: none;
      }
      .warning {
          background-color: #fff3cd;
          border: 1px solid #ffeaa7;
          border-radius: 4px;
          padding: 15px;
          margin: 20px 0;
          color: #856404;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="header">
        {{#if tenant.logo}}
        <img
          src="data:image/png;base64,{{tenant.logo}}"
          alt="{{tenant.longName}}"
          style="max-height: 60px; margin-bottom: 10px"
        />
        {{/if}}
        <div class="logo">{{tenant.longName}}</div>
        <h1 style="margin: 0; font-size: 28px">Confirm Registration</h1>
      </div>

      <div class="content">
        <p>Hello,</p>

        <p>
          Thank you for registering with <strong>{{tenant.longName}}</strong>. To complete your
          registration, please use the following confirmation code:
        </p>

        <div class="confirmation-code">
          <div>Your confirmation code:</div>
          <div class="code">{{confirmationCode}}</div>
          <div style="font-size: 14px; color: #666; margin-top: 10px">
            Enter this code in the confirmation field
          </div>
          <a href="{{tenant.baseUrl}}/confirm/{{confirmationCode}}">Or simply click here.</a>
        </div>

        <div class="warning">
          <strong>Important Notice:</strong> This code is valid for
          <strong>{{expirationMinutes}} minutes</strong> only and can be used only once.
        </div>

        <p>If you did not register with {{tenant.longName}}, you can safely ignore this email.</p>

        <p>If you have any questions, please contact our support team.</p>

        <p>
          Best regards<br />
          The {{tenant.longName}} Team
        </p>
      </div>

      <div class="footer">
        <p>This email was generated automatically. Please do not reply to this email.</p>
        <p>&copy; {{tenant.longName}} - Secure, encrypted, trustworthy</p>
      </div>
    </div>
  </body>
</html>
