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

{% block title %}{% trans "Monthly Follow-Up Due - Observation" %}{% endblock %}

{% block preheader %}{% trans "A resolved observation requires monthly follow-up review." %}{% endblock %}

{% block hero_title %}{% trans "Monthly Follow-Up Required" %}{% endblock %}

{% block hero_subtitle %}{% trans "A resolved observation is due for follow-up review" %}{% endblock %}

{% block content %}
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
    <tr>
        <td style="padding-bottom: 20px;">
            <p style="margin: 0 0 15px 0; font-size: 16px; color: #1e293b; line-height: 1.6;">
                {% trans "Dear" %} <strong>{{ recipient_name|default:'Colleague' }}</strong>,
            </p>
            <p style="margin: 0; font-size: 16px; color: #64748b; line-height: 1.6;">
                {% trans "An observation previously resolved by your team is due for its monthly follow-up review. Please verify that the issue has been fully addressed and sustained." %}
            </p>
        </td>
    </tr>
</table>

<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: 25px 0;">
    <tr>
        <td style="padding: 20px; background-color: #f8fafc; border-left: 4px solid #005696; border-radius: 8px;">
            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                <tr>
                    <td style="padding: 8px 0;">
                        <p style="margin: 0; font-size: 14px; color: #64748b;">
                            <strong style="color: #005696;">{% trans "Tracking Code" %}:</strong> {{ observation.tracking_code }}
                        </p>
                    </td>
                </tr>
                {% if observation.title %}
                <tr>
                    <td style="padding: 8px 0;">
                        <p style="margin: 0; font-size: 14px; color: #1e293b;">
                            <strong style="color: #005696;">{% trans "Title" %}:</strong> {{ observation.title }}
                        </p>
                    </td>
                </tr>
                {% endif %}
                <tr>
                    <td style="padding: 8px 0;">
                        <p style="margin: 0; font-size: 14px; color: #64748b;">
                            <strong style="color: #005696;">{% trans "Category" %}:</strong>
                            {% if observation.category %}{{ observation.category.name_en }}{% else %}N/A{% endif %}
                        </p>
                    </td>
                </tr>
                <tr>
                    <td style="padding: 8px 0;">
                        <p style="margin: 0; font-size: 14px; color: #64748b;">
                            <strong style="color: #005696;">{% trans "Status" %}:</strong>
                            <span style="color: #005696; font-weight: 600;">{{ observation.get_status_display }}</span>
                        </p>
                    </td>
                </tr>
                {% if observation.assigned_department %}
                <tr>
                    <td style="padding: 8px 0;">
                        <p style="margin: 0; font-size: 14px; color: #64748b;">
                            <strong style="color: #005696;">{% trans "Department" %}:</strong> {{ observation.assigned_department.name }}
                        </p>
                    </td>
                </tr>
                {% endif %}
                {% if observation.resolved_at %}
                <tr>
                    <td style="padding: 8px 0;">
                        <p style="margin: 0; font-size: 14px; color: #64748b;">
                            <strong style="color: #005696;">{% trans "Resolved On" %}:</strong>
                            {{ observation.resolved_at|date:"F d, Y" }}
                        </p>
                    </td>
                </tr>
                {% endif %}
            </table>
        </td>
    </tr>
</table>

{% if observation.resolution_notes %}
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: 25px 0;">
    <tr>
        <td style="padding: 20px; background-color: #f8fafc; border-radius: 8px;">
            <p style="margin: 0 0 10px 0; font-size: 14px; font-weight: 600; color: #005696;">
                {% trans "Previous Resolution Notes" %}
            </p>
            <p style="margin: 0; font-size: 14px; color: #1e293b; line-height: 1.6; white-space: pre-wrap;">
                {{ observation.resolution_notes|truncatechars:500 }}
            </p>
        </td>
    </tr>
</table>
{% endif %}

<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: 25px 0;">
    <tr>
        <td style="padding: 15px 20px; 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 "Follow-Up Actions:" %}
            </p>
            <ul style="margin: 0; padding-left: 20px; font-size: 14px; color: #1e293b; line-height: 1.8;">
                <li>{% trans "Verify that the corrective actions are still effective" %}</li>
                <li>{% trans "Confirm the issue has not recurred" %}</li>
                <li>{% trans "Update the observation with follow-up notes" %}</li>
            </ul>
        </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;">
                متابعة شهرية مطلوبة - {{ observation.tracking_code }}
            </p>
            <p style="margin: 0; font-size: 12px; color: #94a3b8; direction: rtl; text-align: right; line-height: 1.8;">
                ملاحظة سابقة الحل تحتاج إلى مراجعة المتابعة الشهرية. يرجى التحقق من استمرار فعالية الإجراءات التصحيحية.
            </p>
        </td>
    </tr>
</table>
{% endblock %}

{% block cta_url %}{{ observation_url }}{% endblock %}
{% block cta_text %}{% trans "Review Observation" %}{% endblock %}

{% block info_title %}{% trans "Important" %}{% endblock %}
{% block info_content %}
{% trans "Please complete the follow-up review and update the observation status in the system." %}
{% endblock %}

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