{% load i18n %}
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"></head>
<body style="font-family: Arial, sans-serif; line-height: 1.6; color: #333;">
<div style="max-width: 600px; margin: 0 auto; padding: 20px;">
    <div style="background: linear-gradient(135deg, #0d9488, #14b8a6); color: white; padding: 20px; border-radius: 10px 10px 0 0; text-align: center;">
        <h1 style="margin: 0;">PX360</h1>
        <p style="margin: 5px 0 0 0; opacity: 0.8;">{% trans "New Communication Request" %}</p>
    </div>
    <div style="background: white; padding: 20px; border: 1px solid #e2e8f0; border-top: none;">
        <p>{% trans "A source user has submitted a communication request:" %}</p>

        <div style="background: #f8fafc; padding: 15px; border-radius: 8px; margin: 15px 0; border-left: 4px solid #0d9488;">
            <p style="margin: 0 0 8px 0;"><strong>{% trans "Reason:" %}</strong> {{ reason }}</p>
            {% if patient_name %}
            <p style="margin: 0 0 8px 0;"><strong>{% trans "Patient:" %}</strong> {{ patient_name }}</p>
            {% endif %}
            <p style="margin: 0 0 8px 0;"><strong>{% trans "From:" %}</strong> {{ source_user_name }}</p>
            <p style="margin: 0;"><strong>{% trans "Message:" %}</strong> {{ message }}</p>
        </div>

        <p style="color: #64748b; font-size: 13px;">{% trans "Request ID:" %} {{ request_id }}</p>

        <div style="text-align: center; margin: 25px 0;">
            <a href="{{ detail_url }}" style="display: inline-block; padding: 12px 30px; font-size: 14px; font-weight: 600; color: white; text-decoration: none; border-radius: 8px; background-color: #0d9488;">{% trans "View & Respond" %}</a>
        </div>

        <p style="color: #64748b; font-size: 12px; margin-top: 10px;">
            {% trans "Or log in to the PX360 system and go to PX Sources → Comm. Requests." %}
        </p>
    </div>
    <div style="text-align: center; padding: 10px; color: #94a3b8; font-size: 11px;">
        <p>PX360 - {% trans "Patient Experience Management System" %}</p>
    </div>
</div>
</body>
</html>
