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

{% block title %}{% trans "Reminder: Explanation Request" %}{% endblock %}

{% block preheader %}{% trans "Reminder: Your explanation for a patient complaint is due soon" %}{% endblock %}

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

{% block hero_subtitle %}{% trans "Your response is due soon. Please submit your explanation to avoid escalation." %}{% endblock %}

{% block content %}
<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.first_name }} {{ staff.last_name }}</strong>,
            </p>
            <p style="margin: 15px 0 0 0; font-size: 16px; color: #64748b; line-height: 1.6;">
                {% trans "This is a reminder that you have been requested to provide an explanation for the following complaint." %}
            </p>
        </td>
    </tr>
</table>

<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: 20px 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>
            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                <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|slice:":8" }}
                    </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>
                {% if complaint.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;">
                        {{ complaint.description }}
                    </td>
                </tr>
                {% endif %}
                <tr>
                    <td style="padding: 8px 0; font-size: 14px; color: #64748b; font-weight: 500;">
                        {% trans "Due In:" %}
                    </td>
                    <td style="padding: 8px 0; font-size: 14px; color: #005696; font-weight: 700;">
                        {{ hours_remaining }} {% trans "hours" %} ({{ due_date|date:"Y-m-d H:i" }})
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
    <tr>
        <td style="padding: 15px; background-color: #eef6fb; border-left: 4px solid #005696; border-radius: 8px;">
            <p style="margin: 0 0 10px 0; font-size: 14px; font-weight: 600; color: #005696;">
                {% trans "Important:" %}
            </p>
            <p style="margin: 0; font-size: 14px; color: #1e293b; line-height: 1.6;">
                {% trans "Please submit your explanation before the deadline to avoid escalation to your manager." %}
            </p>
        </td>
    </tr>
</table>

<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin-top: 25px;">
    <tr>
        <td style="padding: 10px 0; font-size: 11px; color: #94a3b8; border-top: 1px solid #e2e8f0; padding-top: 20px;">
            <p style="margin: 0 0 5px 0; font-size: 13px; color: #64748b; font-weight: 600; direction: rtl; text-align: right;">
                تذكير: طلب شرح - شكوى #{{ complaint.id|slice:":8" }}
            </p>
            <p style="margin: 0; font-size: 12px; color: #94a3b8; direction: rtl; text-align: right; line-height: 1.8;">
                هذا تذكير بأنه تم طلب منك تقديم شرح بخصوص الشكوى التالية.<br>
                موعد تقديم الشرح يتبقى {{ hours_remaining }} ساعة (الموعد النهائي: {{ due_date|date:"Y-m-d H:i" }}).<br>
                يرجى تقديم الشرح قبل الموعد النهائي لتجنب التصعيد إلى مديرك المباشر.
            </p>
        </td>
    </tr>
</table>
{% endblock %}

{% block cta_url %}{{ site_url }}/complaints/explanation/{{ explanation.token }}/{% 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, please contact the person who requested this explanation." %}
{% endblock %}

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