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

{% block title %}{% trans "New Observation Submitted - Al Hammadi Hospital" %}{% endblock %}
{% block preheader %}{% trans "A new observation requires your review and triage" %}{% endblock %}

{% block content %}
<h1 style="margin: 0 0 20px; font-size: 24px; font-weight: 600; color: #005696;">{% trans "New Observation Submitted" %}</h1>

<p style="margin: 0 0 15px; font-size: 16px; color: #1e293b; line-height: 1.6;">
    {% trans "Dear" %} <strong>{{ recipient_name|default:'Colleague' }}</strong>,
</p>
<p style="margin: 0 0 20px; font-size: 16px; color: #475569; line-height: 1.6;">
    {% trans "A new observation has been submitted and requires your review. Please review the details below." %}
</p>

<!-- Observation Details -->
<div style="background-color: #f8fafc; border-radius: 6px; padding: 20px; margin-bottom: 20px;">
    <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 "Tracking Code:" %}</strong> {{ observation.tracking_code }}
            </td>
        </tr>
        {% if observation.title %}
        <tr>
            <td style="padding: 6px 0; font-size: 14px; color: #64748b;">
                <strong style="color: #005696;">{% trans "Title:" %}</strong> {{ observation.title }}
            </td>
        </tr>
        {% endif %}
        <tr>
            <td style="padding: 6px 0; font-size: 14px; color: #64748b;">
                <strong style="color: #005696;">{% trans "Category:" %}</strong>
                {% if observation.category %}{{ observation.category.name_en }}{% else %}N/A{% endif %}
            </td>
        </tr>
        <tr>
            <td style="padding: 6px 0; font-size: 14px; color: #64748b;">
                <strong style="color: #005696;">{% trans "Status:" %}</strong> {{ observation.get_status_display }}
            </td>
        </tr>
        {% if observation.assigned_department %}
        <tr>
            <td style="padding: 6px 0; font-size: 14px; color: #64748b;">
                <strong style="color: #005696;">{% trans "Department:" %}</strong> {{ observation.assigned_department.name }}
            </td>
        </tr>
        {% endif %}
    </table>
</div>

<p style="margin: 0; font-size: 13px; color: #94a3b8; line-height: 1.5;">
    {% trans "This is an automated notification. Please log in to PX360 for full details." %}
</p>
{% endblock %}