{% load i18n %}
{% load static %}
{% autoescape off %}

{# Use the built-in context variable 'password_reset_url' that allauth provides. #}

<div style="font-family: Arial, sans-serif; line-height: 1.6; color: #333; max-width: 600px; margin: auto; border: 1px solid #ddd; border-radius: 8px; overflow: hidden;">
    
    <div style="background-color: #00636e; padding: 20px; color: white; text-align: center;">
        <h1 style="margin: 0; font-size: 24px;">{% trans "Password Reset Request" %}</h1>
    </div>

    <div style="padding: 20px;">
        <p>{% trans "Hello," %}</p>
        
        <p>{% trans "You are receiving this email because you or someone else has requested a password reset for your account at" %} <strong>{{ current_site.name }}</strong>.</p>

        <p style="text-align: center; margin: 30px 0;">
            <a href="{{ password_reset_url }}" 
               style="display: inline-block; padding: 10px 20px; color: white; background-color: #00636e; border-radius: 5px; text-decoration: none; font-weight: bold;">
                {% trans "Click Here to Reset Your Password" %}
            </a>
        </p>

        <p>{% trans "This link is only valid for a limited time." %}</p>

        <p>{% trans "If you did not request a password reset, please ignore this email. Your password will remain unchanged." %}</p>

        <p>
            {% trans "Thank you," %}<br>
            {% trans "KAAUH ATS Team" %}
        </p>
    </div>

    <div style="background-color: #f4f4f4; padding: 15px; font-size: 12px; color: #777; text-align: center;">
        {% trans "If the button above does not work, copy and paste the following link into your browser:" %}<br>
        <a href="{{ password_reset_url }}" style="color: #00636e; word-break: break-all;">{{ password_reset_url }}</a>
    </div>
</div>

{% endautoescape %}