HH/templates/emails/observation_sla_second_reminder.html
2026-04-08 17:13:35 +03:00

169 lines
8.0 KiB
HTML

{% extends 'emails/base_email_template.html' %}
{% load i18n %}
{% block extra_styles %}
{{ block.super }}
<style>
.urgent-hero { background: linear-gradient(135deg, #005696 0%, #007bbd 100%) !important; }
</style>
{% endblock %}
{% block title %}{% trans "URGENT - Second SLA Reminder - Observation" %}{% endblock %}
{% block preheader %}{% trans "FINAL REMINDER: An observation is about to breach its SLA. Immediate action required." %}{% endblock %}
{% block hero %}
<tr>
<td class="urgent-hero" style="padding: 40px 40px 30px 40px; text-align: center; background-color: #005696;">
<h1 class="heading-mobile" style="margin: 0 0 10px 0; font-size: 26px; font-weight: 700; color: #ffffff; line-height: 1.4;">
{% trans "URGENT - Final Reminder" %}
</h1>
<p style="margin: 0; font-size: 16px; color: #eef6fb; line-height: 1.6;">
{% trans "This observation is about to breach its SLA deadline" %}
</p>
</td>
</tr>
{% 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>{{ recipient_name|default:'Colleague' }}</strong>,
</p>
<p style="margin: 15px 0 0 0; font-size: 16px; color: #005696; font-weight: 600; line-height: 1.6;">
{% trans "This is the final reminder that an observation is about to breach its SLA deadline. Immediate action is required." %}
</p>
</td>
</tr>
</table>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: 20px 0; background-color: #eef6fb; border-radius: 8px; border: 1px solid #cbd5e1;">
<tr>
<td style="padding: 20px;">
<h3 style="margin: 0 0 15px 0; font-size: 18px; font-weight: 600; color: #005696; text-align: center;">
{% trans "Observation Details" %}
</h3>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="130" style="padding: 8px 0; font-size: 14px; color: #64748b; font-weight: 500;">
{% trans "Tracking Code:" %}
</td>
<td style="padding: 8px 0; font-size: 14px; color: #1e293b; font-weight: 600;">
{{ observation.tracking_code }}
</td>
</tr>
{% if observation.title %}
<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;">
{{ observation.title }}
</td>
</tr>
{% endif %}
<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;">
{% if observation.category %}{{ observation.category.name_en }}{% else %}N/A{% endif %}
</td>
</tr>
<tr>
<td style="padding: 8px 0; font-size: 14px; color: #64748b; font-weight: 500;">
{% trans "Severity:" %}
</td>
<td style="padding: 8px 0; font-size: 14px; font-weight: 600;">
<span style="color: #005696;">
{{ observation.get_severity_display }}
</span>
</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;">
{{ observation.get_status_display }}
</td>
</tr>
</table>
</td>
</tr>
</table>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: 20px 0; background-color: #eef6fb; border-radius: 8px; border: 1px solid #005696;">
<tr>
<td style="padding: 20px;">
<h3 style="margin: 0 0 15px 0; font-size: 16px; font-weight: 600; color: #005696; text-align: center;">
{% trans "SLA Deadline - Critical" %}
</h3>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="130" style="padding: 8px 0; font-size: 14px; color: #64748b; font-weight: 500;">
{% trans "Due Date:" %}
</td>
<td style="padding: 8px 0; font-size: 14px; color: #005696; font-weight: 700;">
{{ due_date|date:"F d, Y H:i" }}
</td>
</tr>
<tr>
<td style="padding: 8px 0; font-size: 14px; color: #64748b; font-weight: 500;">
{% trans "Time Remaining:" %}
</td>
<td style="padding: 8px 0; font-size: 14px; color: #005696; font-weight: 700;">
{{ hours_remaining }} {% trans "hours" %}
</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 "Immediate Action Required:" %}
</p>
<ul style="margin: 0; padding-left: 20px; font-size: 14px; color: #1e293b; line-height: 1.8;">
<li>{% trans "Review and address this observation immediately" %}</li>
<li>{% trans "Update the observation status in the system" %}</li>
<li>{% trans "Add resolution notes to document actions taken" %}</li>
<li>{% trans "Failure to act may result in automatic escalation" %}</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;">
هذا هو التذكير النهائي. الملاحظة على وشك تجاوز الموعد النهائي. يرجى اتخاذ الإجراء فوراً.<br>
تاريخ الاستحقاق: {{ due_date|date:"Y F d H:i" }} - الوقت المتبقي: {{ hours_remaining }} ساعة
</p>
</td>
</tr>
</table>
{% endblock %}
{% block cta_url %}{{ observation_url }}{% endblock %}
{% block cta_text %}{% trans "View Observation Now" %}{% endblock %}
{% block info_title %}{% trans "Warning" %}{% endblock %}
{% block info_content %}
{% trans "This observation will be flagged as overdue if not addressed before the SLA deadline. This may trigger automatic escalation to management." %}
{% endblock %}
{% block footer_address %}
PX360 Observation Management System<br>
Al Hammadi Hospital
{% endblock %}