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

{% block title %}{% trans "Reminder: Complete Your PX360 Account Setup - Al Hammadi Hospital" %}{% endblock %}

{% block preheader %}{% trans "Your PX360 account setup is pending. Please complete before expiry." %}{% endblock %}

{% block hero_title %}⏰ {% trans "Reminder: Complete Your Setup" %}{% endblock %}

{% block hero_subtitle %}{% trans "Your PX360 account invitation is still active" %}{% 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 "We noticed that you haven't completed your PX360 account setup yet. Your invitation is still active, and we'd love to have you on board!" %}
            </p>
            <p style="margin: 15px 0 0 0; font-size: 16px; color: #64748b; line-height: 1.6;">
                {% trans "Click the button below to continue where you left off:" %}
            </p>
        </td>
    </tr>
</table>

<!-- Quick Benefits -->
<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 "Why Complete Your Setup?" %}
            </h3>
        </td>
    </tr>
    <tr>
        <td>
            <!-- Benefit 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;">
                            <strong>{% trans "Access Your Dashboard:" %}</strong> {% trans "Manage your tasks and responsibilities" %}
                        </p>
                    </td>
                </tr>
            </table>
            
            <!-- Benefit 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;">
                            <strong>{% trans "Collaborate with Your Team:" %}</strong> {% trans "Connect with colleagues across departments" %}
                        </p>
                    </td>
                </tr>
            </table>
            
            <!-- Benefit 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;">
                            <strong>{% trans "Stay Updated:" %}</strong> {% trans "Get real-time notifications and alerts" %}
                        </p>
                    </td>
                </tr>
            </table>
            
            <!-- Benefit 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;">
                            <strong>{% trans "Improve Patient Experience:" %}</strong> {% trans "Contribute to better healthcare outcomes" %}
                        </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 Your Setup" %}
                        </a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

<!-- Expiry Warning -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin-top: 30px;">
    <tr>
        <td style="background-color: #fef3c7; 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 "Time Sensitive:" %}</strong> {% trans "Your invitation will expire in" %} <strong>{{ days_remaining }} {% trans "days" %}</strong>. {% trans "After that, you'll need to request a new invitation from your administrator." %}
            </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 "Need help? Contact our support team at" %}
                <a href="mailto:support@alhammadi.com" style="color: #005696; text-decoration: none;">support@alhammadi.com</a>
                {% trans "or call" %} <strong>+966 11 123 4567</strong>.
            </p>
        </td>
    </tr>
</table>
{% endblock %}