{% extends 'emails/base_email_template.html' %}
{% load i18n %}

{% block title %}{% trans "Password Reset Request - PX360 Al Hammadi Hospital" %}{% endblock %}

{% block preheader %}{% trans "We received a request to reset your password. Click to reset it now." %}{% endblock %}

{% block hero_title %}{% trans "Password Reset Request" %}{% endblock %}

{% block hero_subtitle %}{% trans "Patient Experience Management System" %}{% endblock %}

{% block content %}
<!-- Greeting -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
    <tr>
        <td style="padding-bottom: 20px;">
            <p style="margin: 0; font-size: 16px; color: #1e293b; line-height: 1.6;">
                {% trans "Hello" %} <strong>{{ user.email }}</strong>,
            </p>
            <p style="margin: 15px 0 0 0; font-size: 16px; color: #64748b; line-height: 1.6;">
                {% trans "We received a request to reset your password for your PX360 account. If you made this request, click the button below to reset your password:" %}
            </p>
        </td>
    </tr>
</table>

<!-- Reset Link Text -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
    <tr>
        <td style="padding-bottom: 15px;">
            <p style="margin: 0; font-size: 14px; color: #64748b;">
                {% trans "Or copy and paste this link into your browser:" %}
            </p>
            <p style="margin: 5px 0 0 0; font-size: 12px; color: #007bbd; word-break: break-all;">
                {{ protocol }}://{{ domain }}{% url 'accounts:password_reset_confirm' uidb64=uid token=token %}
            </p>
        </td>
    </tr>
</table>

<!-- Warning Box -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
    <tr>
        <td style="padding: 15px; background-color: #fff3cd; border-left: 4px solid #ffc107; border-radius: 8px;">
            <p style="margin: 0 0 10px 0; font-size: 14px; font-weight: 600; color: #856404;">
                {% trans "Important:" %}
            </p>
            <p style="margin: 0; font-size: 14px; color: #856404; line-height: 1.6;">
                {% trans "This link will expire in 24 hours. If you didn't request this password reset, please ignore this email and your password will remain unchanged." %}
            </p>
        </td>
    </tr>
</table>

<!-- Support Message -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin-top: 20px;">
    <tr>
        <td>
            <p style="margin: 0; font-size: 14px; color: #64748b; line-height: 1.6;">
                {% trans "If you continue to have problems, please contact our support team." %}
            </p>
        </td>
    </tr>
</table>
{% endblock %}

{% block cta_url %}{{ protocol }}://{{ domain }}{% url 'accounts:password_reset_confirm' uidb64=uid token=token %}{% endblock %}
{% block cta_text %}{% trans "Reset My Password" %}{% endblock %}

{% block footer_address %}
PX360 - Patient Experience Management<br>
Al Hammadi Hospital
{% endblock %}