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

{% block title %}{% trans "Explanation Request - Al Hammadi Hospital" %}{% endblock %}

{% block preheader %}{% trans "You have been assigned to provide an explanation for a patient complaint" %}{% endblock %}

{% block hero_title %}{% trans "Explanation Request" %}{% endblock %}

{% block hero_subtitle %}{% trans "Please review the complaint details and submit your response" %}{% 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;">
                {% trans "Dear" %} <strong>{{ staff_name }}</strong>,
            </p>
            <p style="margin: 15px 0 0 0; font-size: 16px; color: #64748b; line-height: 1.6;">
                {% trans "You have been assigned to provide an explanation for the following patient complaint. Please review the details and submit your response using the button below." %}
            </p>
        </td>
    </tr>
</table>

{% if custom_message %}
<!-- Custom Message -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: 20px 0;">
    <tr>
        <td style="padding: 15px; background-color: #e3f2fd; border-left: 4px solid #2196f3; border-radius: 5px;">
            <p style="margin: 0 0 10px 0; font-size: 14px; font-weight: 600; color: #1976d2;">
                {% trans "Note from PX Team:" %}
            </p>
            <p style="margin: 0; font-size: 14px; color: #1e293b; line-height: 1.6;">
                {{ custom_message }}
            </p>
        </td>
    </tr>
</table>
{% endif %}

<!-- Complaint Details 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 "Complaint Details" %}
            </h3>
            
            <!-- Detail Row 1 -->
            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin-bottom: 10px;">
                <tr>
                    <td width="120" style="padding: 8px 0; font-size: 14px; color: #64748b; font-weight: 500;">
                        {% trans "Reference:" %}
                    </td>
                    <td style="padding: 8px 0; font-size: 14px; color: #1e293b; font-weight: 600;">
                        #{{ complaint_id }}
                    </td>
                </tr>
                <tr>
                    <td style="padding: 8px 0; font-size: 14px; color: #64748b; font-weight: 500;">
                        {% trans "Title:" %}
                    </td>
                    <td style="padding: 8px 0; font-size: 14px; color: #1e293b; font-weight: 600;">
                        {{ complaint_title }}
                    </td>
                </tr>
                <tr>
                    <td style="padding: 8px 0; font-size: 14px; color: #64748b; font-weight: 500;">
                        {% trans "Patient:" %}
                    </td>
                    <td style="padding: 8px 0; font-size: 14px; color: #1e293b; font-weight: 600;">
                        {{ patient_name }}
                    </td>
                </tr>
                <tr>
                    <td style="padding: 8px 0; font-size: 14px; color: #64748b; font-weight: 500;">
                        {% trans "Hospital:" %}
                    </td>
                    <td style="padding: 8px 0; font-size: 14px; color: #1e293b; font-weight: 600;">
                        {{ hospital_name }}
                    </td>
                </tr>
                <tr>
                    <td style="padding: 8px 0; font-size: 14px; color: #64748b; font-weight: 500;">
                        {% trans "Department:" %}
                    </td>
                    <td style="padding: 8px 0; font-size: 14px; color: #1e293b; font-weight: 600;">
                        {{ department_name }}
                    </td>
                </tr>
                <tr>
                    <td style="padding: 8px 0; font-size: 14px; color: #64748b; font-weight: 500;">
                        {% trans "Category:" %}
                    </td>
                    <td style="padding: 8px 0; font-size: 14px; color: #1e293b; font-weight: 600;">
                        {{ category }}
                    </td>
                </tr>
                <tr>
                    <td style="padding: 8px 0; font-size: 14px; color: #64748b; font-weight: 500;">
                        {% trans "Status:" %}
                    </td>
                    <td style="padding: 8px 0; font-size: 14px; color: #1e293b; font-weight: 600;">
                        {{ status }}
                    </td>
                </tr>
                <tr>
                    <td style="padding: 8px 0; font-size: 14px; color: #64748b; font-weight: 500;">
                        {% trans "Date:" %}
                    </td>
                    <td style="padding: 8px 0; font-size: 14px; color: #1e293b; font-weight: 600;">
                        {{ created_date }}
                    </td>
                </tr>
                
                {% if description %}
                <tr>
                    <td valign="top" style="padding: 8px 0; font-size: 14px; color: #64748b; font-weight: 500;">
                        {% trans "Description:" %}
                    </td>
                    <td style="padding: 8px 0; font-size: 14px; color: #1e293b; line-height: 1.6;">
                        {{ description }}
                    </td>
                </tr>
                {% endif %}
            </table>
        </td>
    </tr>
</table>

<!-- Important Information -->
<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 "Important Information:" %}
            </p>
            <ul style="margin: 0; padding-left: 20px; font-size: 14px; color: #78350f; line-height: 1.8;">
                <li>{% trans "This link is unique and can only be used once" %}</li>
                <li>{% trans "You can attach supporting documents to your explanation" %}</li>
                <li>{% trans "Your response will be reviewed by the PX team" %}</li>
                <li>{% trans "Please submit your explanation at your earliest convenience" %}</li>
            </ul>
        </td>
    </tr>
</table>
{% endblock %}

{% block cta_url %}{{ explanation_url }}{% endblock %}
{% block cta_text %}{% trans "Submit Your Explanation" %}{% endblock %}

{% block info_title %}{% trans "Need Assistance?" %}{% endblock %}
{% block info_content %}
{% trans "If you have any questions or concerns, please contact the PX team directly." %}<br>
<strong>{% trans "Note:" %}</strong> {% trans "This is an automated email. Please do not reply directly to this message." %}
{% endblock %}

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