{% 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 content %}
<h1 style="margin: 0 0 20px; font-size: 24px; font-weight: 600; color: #005696;">{% trans "Explanation Request" %}</h1>

<p style="margin: 0 0 15px; font-size: 16px; color: #1e293b; line-height: 1.6;">
    {% trans "Dear" %} <strong>{{ staff_name }}</strong>,
</p>
<p style="margin: 0 0 20px; font-size: 16px; color: #475569; 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>

{% if custom_message %}
<div style="padding: 15px; background-color: #eef6fb; border-radius: 6px; margin-bottom: 20px;">
    <p style="margin: 0; font-size: 14px; color: #005696; line-height: 1.6;">
        <strong>{% trans "Note from PX Team:" %}</strong> {{ custom_message }}
    </p>
</div>
{% endif %}

<!-- Complaint Details -->
<div style="background-color: #f8fafc; border-radius: 6px; padding: 20px; margin-bottom: 25px;">
    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
        <tr>
            <td style="padding: 6px 0; font-size: 14px; color: #64748b;">
                <strong style="color: #005696;">{% trans "Reference:" %}</strong> #{{ complaint_id }}
            </td>
        </tr>
        <tr>
            <td style="padding: 6px 0; font-size: 14px; color: #64748b;">
                <strong style="color: #005696;">{% trans "Title:" %}</strong> {{ complaint_title }}
            </td>
        </tr>
        <tr>
            <td style="padding: 6px 0; font-size: 14px; color: #64748b;">
                <strong style="color: #005696;">{% trans "Patient:" %}</strong> {{ patient_name }}
            </td>
        </tr>
        <tr>
            <td style="padding: 6px 0; font-size: 14px; color: #64748b;">
                <strong style="color: #005696;">{% trans "Department:" %}</strong> {{ department_name }}
            </td>
        </tr>
        <tr>
            <td style="padding: 6px 0; font-size: 14px; color: #64748b;">
                <strong style="color: #005696;">{% trans "Deadline:" %}</strong> {{ created_date }}
            </td>
        </tr>
        {% if description %}
        <tr>
            <td style="padding: 6px 0; font-size: 14px; color: #64748b;">
                <strong style="color: #005696;">{% trans "Description:" %}</strong><br>
                {{ description }}
            </td>
        </tr>
        {% endif %}
    </table>
</div>

<!-- CTA Button -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
    <tr>
        <td align="center">
            <a href="{{ explanation_url }}"
               style="display: inline-block; padding: 12px 32px; font-size: 16px; font-weight: 600; color: #ffffff; text-decoration: none; border-radius: 6px; background-color: #005696;">
                {% trans "Submit Your Explanation" %}
            </a>
        </td>
    </tr>
</table>

<p style="margin: 25px 0 0; font-size: 13px; color: #94a3b8; line-height: 1.5;">
    {% trans "If you have any questions, please contact the PX team." %}<br>
    {% trans "This is an automated email. Please do not reply." %}
</p>
{% endblock %}