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

{% block title %}{% trans "Your PX360 Password Has Been Reset - Al Hammadi Hospital" %}{% endblock %}

{% block preheader %}{% trans "Your password has been reset by an administrator. Find your new credentials below." %}{% endblock %}

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

{% block hero_subtitle %}{% trans "Your PX360 account password has been reset" %}{% endblock %}

{% block content %}
<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 "Dear" %} <strong>{{ user.get_full_name }}</strong>,
            </p>
            <p style="margin: 15px 0 0 0; font-size: 16px; color: #64748b; line-height: 1.6;">
                {% trans "Your PX360 account password has been reset by an administrator. Please use the new credentials below to login." %}
            </p>
        </td>
    </tr>
</table>

<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: 20px 0; background-color: #f8fafc; border-radius: 8px; border: 1px solid #e2e8f0;">
    <tr>
        <td style="padding: 20px;">
            <h3 style="margin: 0 0 15px 0; font-size: 18px; font-weight: 600; color: #005696; text-align: center;">
                {% trans "Your New Credentials" %}
            </h3>
            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                <tr>
                    <td width="120" style="padding: 10px 0; font-size: 14px; color: #64748b; font-weight: 500;">
                        {% trans "Email:" %}
                    </td>
                    <td style="padding: 10px 0; font-size: 16px; color: #1e293b; font-weight: 600;">
                        {{ user.email }}
                    </td>
                </tr>
                <tr>
                    <td style="padding: 10px 0; font-size: 14px; color: #64748b; font-weight: 500;">
                        {% trans "Password:" %}
                    </td>
                    <td style="padding: 10px 0; font-size: 16px; color: #1e293b; font-weight: 600; font-family: monospace;">
                        {{ password }}
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
    <tr>
        <td style="padding: 15px; background-color: #fef3c7; border-left: 4px solid #f59e0b; border-radius: 8px;">
            <p style="margin: 0 0 10px 0; font-size: 14px; font-weight: 600; color: #92400e;">
                {% trans "Security Notice:" %}
            </p>
            <p style="margin: 0; font-size: 14px; color: #78350f; line-height: 1.6;">
                {% trans "Please change your password immediately after logging in for security purposes." %}
            </p>
        </td>
    </tr>
</table>
{% endblock %}

{% block cta_url %}{{ login_url }}{% endblock %}
{% block cta_text %}{% trans "Login to PX360" %}{% endblock %}

{% block info_title %}{% trans "Need Assistance?" %}{% endblock %}
{% block info_content %}
{% trans "If you did not expect this password reset, please contact your system administrator immediately." %}
{% endblock %}

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