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

{% block title %}{% trans "User Onboarding Completed - Al Hammadi Hospital" %}{% endblock %}

{% block preheader %}{% trans "A new user has completed onboarding and is now active." %}{% endblock %}

{% block hero_title %}✅ {% trans "User Onboarding Completed" %}{% endblock %}

{% block hero_subtitle %}{% trans "A new team member has joined PX360" %}{% endblock %}

{% block content %}
<!-- Notification Message -->
<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 "A new user has successfully completed the onboarding process and is now active in the PX360 system." %}
            </p>
        </td>
    </tr>
</table>

<!-- User Information Card -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: 25px 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 "User Information" %}
            </h3>
            
            <!-- Detail Rows -->
            <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 "Name:" %}
                    </td>
                    <td style="padding: 10px 0; font-size: 14px; color: #1e293b; font-weight: 600;">
                        {{ user.get_full_name|default:_("Not provided") }}
                    </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: 14px; color: #1e293b; font-weight: 600;">
                        {{ user.email }}
                    </td>
                </tr>
                <tr>
                    <td style="padding: 10px 0; font-size: 14px; color: #64748b; font-weight: 500;">
                        {% trans "Role:" %}
                    </td>
                    <td style="padding: 10px 0; font-size: 14px; color: #1e293b; font-weight: 600;">
                        {{ role_display|default:_("Not assigned") }}
                    </td>
                </tr>
                <tr>
                    <td style="padding: 10px 0; font-size: 14px; color: #64748b; font-weight: 500;">
                        {% trans "Department:" %}
                    </td>
                    <td style="padding: 10px 0; font-size: 14px; color: #1e293b; font-weight: 600;">
                        {{ department|default:_("Not assigned") }}
                    </td>
                </tr>
                <tr>
                    <td style="padding: 10px 0; font-size: 14px; color: #64748b; font-weight: 500;">
                        {% trans "Completed At:" %}
                    </td>
                    <td style="padding: 10px 0; font-size: 14px; color: #1e293b; font-weight: 600;">
                        {{ completed_at|date:"Y-m-d H:i" }}
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

<!-- Next Steps -->
<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 "Next Steps" %}
            </h3>
            <p style="margin: 0 0 15px 0; font-size: 15px; color: #1e293b; line-height: 1.6;">
                {% trans "The user can now access PX360 and begin using the platform. You may want to:" %}
            </p>
            
            <ul style="margin: 0; padding-left: 20px; font-size: 15px; color: #1e293b; line-height: 1.8;">
                <li>{% trans "Welcome them to the team" %}</li>
                <li>{% trans "Provide role-specific training if needed" %}</li>
                <li>{% trans "Assign initial tasks or responsibilities" %}</li>
                <li>{% trans "Introduce them to relevant team members" %}</li>
            </ul>
        </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="{{ user_admin_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 "View User Profile" %}
                        </a>
                    </td>
                </tr>
            </table>
        </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 need to make any changes to this user's account, please visit the admin panel or contact support." %}
            </p>
        </td>
    </tr>
</table>
{% endblock %}