{% extends "emails/base.html" %}

{% block content %}
<div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px;">
    <div style="text-align: center; margin-bottom: 20px;">
        <h1 style="color: #2c3e50;">Confirm Your Subscription</h1>
        <p>Thank you for subscribing to our newsletter!</p>
    </div>

    <div style="background-color: #f9f9f9; border-radius: 5px; padding: 20px; margin-bottom: 20px;">
        <p>Please confirm your email address by clicking the button below:</p>
        
        <div style="text-align: center; margin: 25px 0;">
            <a href="{{ confirmation_url }}" 
               style="display: inline-block; background-color: #3498db; color: white; 
                      padding: 12px 24px; text-decoration: none; border-radius: 4px; 
                      font-weight: bold;">
                Confirm Subscription
            </a>
        </div>
        
        <p style="font-size: 14px; color: #7f8c8d;">
            Or copy and paste this link into your browser:<br>
            <a href="{{ confirmation_url }}" style="color: #3498db; word-break: break-all;">
                {{ confirmation_url }}
            </a>
        </p>
    </div>

    <div style="text-align: center; margin-top: 30px; color: #7f8c8d; font-size: 14px;">
        <p>If you didn't request this email, you can safely ignore it.</p>
        <p>
            <a href="{{ site_url }}" style="color: #7f8c8d; text-decoration: underline;">
                Visit our website
            </a>
        </p>
    </div>
</div>
{% endblock %}