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

{% block title %}{% trans "Welcome to PX360 - Al Hammadi Hospital" %}{% endblock %}

{% block preheader %}{% trans "You have been invited to join PX360. Complete your account setup." %}{% endblock %}

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

{% block hero_subtitle %}{% trans "Your comprehensive Patient Experience management platform" %}{% 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;">
                {% blocktrans with name=user.first_name|default:user.email %}Hello <strong>{{ name }}</strong>,{% endblocktrans %}
            </p>
            <p style="margin: 15px 0 0 0; font-size: 16px; color: #64748b; line-height: 1.6;">
                {% trans "You have been invited to join PX360, our comprehensive Patient Experience management platform. To complete your account setup, please click the button below." %}
            </p>
        </td>
    </tr>
</table>

<!-- What You'll Do -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin-top: 25px;">
    <tr>
        <td>
            <h3 style="margin: 0 0 15px 0; font-size: 18px; font-weight: 600; color: #005696;">
                {% trans "During the onboarding process, you will:" %}
            </h3>
        </td>
    </tr>
    <tr>
        <td>
            <!-- Item 1 -->
            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin-bottom: 12px;">
                <tr>
                    <td width="40" valign="top" style="padding-right: 10px;">
                        <span style="display: inline-block; width: 32px; height: 32px; background-color: #eef6fb; border-radius: 50%; text-align: center; line-height: 32px; font-size: 18px;">✓</span>
                    </td>
                    <td>
                        <p style="margin: 0; font-size: 15px; color: #1e293b; line-height: 1.5;">
                            {% trans "Learn about PX360 features and your role responsibilities" %}
                        </p>
                    </td>
                </tr>
            </table>
            
            <!-- Item 2 -->
            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin-bottom: 12px;">
                <tr>
                    <td width="40" valign="top" style="padding-right: 10px;">
                        <span style="display: inline-block; width: 32px; height: 32px; background-color: #eef6fb; border-radius: 50%; text-align: center; line-height: 32px; font-size: 18px;">✓</span>
                    </td>
                    <td>
                        <p style="margin: 0; font-size: 15px; color: #1e293b; line-height: 1.5;">
                            {% trans "Set up your profile and preferences" %}
                        </p>
                    </td>
                </tr>
            </table>
            
            <!-- Item 3 -->
            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin-bottom: 12px;">
                <tr>
                    <td width="40" valign="top" style="padding-right: 10px;">
                        <span style="display: inline-block; width: 32px; height: 32px; background-color: #eef6fb; border-radius: 50%; text-align: center; line-height: 32px; font-size: 18px;">✓</span>
                    </td>
                    <td>
                        <p style="margin: 0; font-size: 15px; color: #1e293b; line-height: 1.5;">
                            {% trans "Complete required training materials" %}
                        </p>
                    </td>
                </tr>
            </table>
            
            <!-- Item 4 -->
            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                <tr>
                    <td width="40" valign="top" style="padding-right: 10px;">
                        <span style="display: inline-block; width: 32px; height: 32px; background-color: #eef6fb; border-radius: 50%; text-align: center; line-height: 32px; font-size: 18px;">✓</span>
                    </td>
                    <td>
                        <p style="margin: 0; font-size: 15px; color: #1e293b; line-height: 1.5;">
                            {% trans "Activate your account and start using PX360" %}
                        </p>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

<!-- CTA Button -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin-top: 30px;">
    <tr>
        <td align="center">
            <table role="presentation" cellspacing="0" cellpadding="0" border="0">
                <tr>
                    <td align="center" style="border-radius: 6px;" bgcolor="#005696">
                        <a href="{{ invitation_url }}" target="_blank"
                           style="display: inline-block; padding: 14px 32px; font-size: 16px; font-weight: 600; color: #ffffff; text-decoration: none; border-radius: 6px; background-color: #005696;">
                            {% trans "Complete Account Setup" %}
                        </a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

<!-- Security Notice -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin-top: 30px;">
    <tr>
        <td style="background-color: #fffbeb; border-left: 4px solid #f59e0b; padding: 15px; border-radius: 4px;">
            <p style="margin: 0; font-size: 14px; color: #92400e; line-height: 1.5;">
                <strong>{% trans "Important:" %}</strong> {% trans "This invitation link will expire in 7 days. If you don't complete the setup within this period, you'll need to request a new invitation." %}
            </p>
        </td>
    </tr>
</table>

<!-- Help Section -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin-top: 25px;">
    <tr>
        <td style="border-top: 1px solid #e2e8f0; padding-top: 20px;">
            <p style="margin: 0; font-size: 14px; color: #64748b; line-height: 1.6;">
                {% trans "If you have any questions or need assistance, please contact our support team at" %}
                <a href="mailto:support@alhammadi.com" style="color: #005696; text-decoration: none;">support@alhammadi.com</a>
                {% trans "or call us at" %} <strong>+966 11 123 4567</strong>.
            </p>
        </td>
    </tr>
</table>
{% endblock %}