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

{% block title %}{% trans "Your PX360 Account Credentials - Al Hammadi Hospital" %}{% endblock %}

{% block preheader %}{% trans "Your PX360 account has been created. Find your login credentials below." %}{% endblock %}

{% block hero_title %}{% trans "Welcome to PX360" %}{% endblock %}

{% block hero_subtitle %}{% trans "Your account has been created successfully. Below are your login credentials." %}{% 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>{{ staff.get_full_name }}</strong>,
            </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 Account Details" %}
            </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 "Username:" %}
                    </td>
                    <td style="padding: 10px 0; font-size: 16px; color: #1e293b; font-weight: 600; font-family: monospace;">
                        {{ user.username }}
                    </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>
                <tr>
                    <td 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;">
                        {{ staff.email }}
                    </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 after your first login 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 have any questions or need assistance, please contact your system administrator." %}
{% endblock %}

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