<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Email Verification</title>
</head>
<body style="font-family: Arial, Helvetica, sans-serif; background-color: #f5f5f5; margin: 0; padding: 20px; color: #333;">
    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="max-width: 560px; margin: 0 auto; background-color: #ffffff; border-radius: 6px;">
        <tr>
            <td style="padding: 32px;">
                <h1 style="font-size: 22px; margin: 0 0 16px;">Hi {{ user_name }},</h1>
                <p style="font-size: 15px; line-height: 1.6; margin: 0 0 16px;">
                    Thank you for signing up on {{ site_name }}. Please verify your email address by entering the code below:
                </p>
                <p style="text-align: center; margin: 24px 0;">
                    <span style="display: inline-block; background-color: #f0f0f0; padding: 14px 28px; font-size: 24px; font-weight: bold; letter-spacing: 4px; border-radius: 4px; font-family: monospace;">{{ otp_code }}</span>
                </p>
                <p style="font-size: 14px; line-height: 1.6; margin: 0 0 16px; color: #555;">
                    This code is valid for {{ otp_expiry_minutes|default:"15" }} minutes.
                </p>
                <p style="font-size: 14px; line-height: 1.6; margin: 0; color: #555;">
                    If you did not create an account, you can safely ignore this email.
                </p>
            </td>
        </tr>
        <tr>
            <td style="padding: 16px 32px; font-size: 12px; color: #999; border-top: 1px solid #eee;">
                &copy; {{ current_year }} {{ site_name }}
            </td>
        </tr>
    </table>
</body>
</html>
