{% 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, #0891b2, #06b6d4); 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 "Inquiry Response Request" %}</p>
    </div>
    <div style="background: white; padding: 20px; border: 1px solid #e2e8f0; border-top: none;">
        <p>{% trans "Dear" %} {{ staff_name }},</p>
        <p>{% trans "You have been requested to provide a response regarding the following inquiry:" %}</p>

        <div style="background: #f8fafc; padding: 15px; border-radius: 8px; margin: 15px 0; border-left: 4px solid #0891b2;">
            <p style="margin: 0 0 8px 0;"><strong>{% trans "Reference:" %}</strong> #{{ inquiry_reference }}</p>
            <p style="margin: 0 0 8px 0;"><strong>{% trans "Subject:" %}</strong> {{ inquiry_subject }}</p>
            {% if inquiry_message %}
            <p style="margin: 0;"><strong>{% trans "Message:" %}</strong> {{ inquiry_message }}</p>
            {% endif %}
        </div>

        {% if request_message %}
        <div style="background: #eff6ff; padding: 15px; border-radius: 8px; margin: 15px 0; border-left: 4px solid #3b82f6;">
            <p style="margin: 0 0 5px 0; font-weight: bold;">{% trans "Request Message:" %}</p>
            <p style="margin: 0;">{{ request_message }}</p>
        </div>
        {% endif %}

        <div style="text-align: center; margin: 25px 0;">
            <a href="{{ explanation_url }}" style="background: #0891b2; color: white; padding: 12px 30px; text-decoration: none; border-radius: 8px; font-weight: bold; display: inline-block;">
                {% trans "Submit Your Response" %}
            </a>
        </div>

        <p style="color: #64748b; font-size: 12px;">{% trans "This link can only be used once. If you cannot click the button above, copy and paste the following URL into your browser:" %}</p>
        <p style="color: #0891b2; font-size: 12px; word-break: break-all;">{{ explanation_url }}</p>
    </div>
    <div style="text-align: center; padding: 10px; color: #94a3b8; font-size: 11px;">
        <p>{{ site_name }} - {% trans "Patient Experience Management System" %}</p>
    </div>
</div>
</body>
</html>
