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

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

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

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

{% block hero_subtitle %}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;">
                Hello <strong>{{ user.first_name|default:user.email }}</strong>,
            </p>
            <p style="margin: 15px 0 0 0; font-size: 16px; color: #64748b; line-height: 1.6;">
                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;">
                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;">
                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>Access Your Dashboard:</strong> 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>View Analytics:</strong> Track patient experience metrics
                        </p>
                    </td>
                </tr>
            </table>
            
            <!-- Benefit 3 -->
            <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>Take Action:</strong> Respond to complaints and feedback
                        </p>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
{% endblock %}

{% block cta_url %}{{ activation_url }}{% endblock %}
{% block cta_text %}Complete Account Setup{% endblock %}

{% block info_title %}⚠️ Time Sensitive: Invitation Expiry{% endblock %}
{% block info_content %}
Your invitation link will expire on <strong>{{ expires_at|date:"F j, Y, g:i a" }}</strong>. Please complete your registration before this date to avoid requesting a new invitation.
{% endblock %}

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