{% load i18n %}
{% load static %}
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE|default:'en' }}" dir="{% if LANGUAGE_CODE == 'ar' %}rtl{% else %}ltr{% endif %}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% trans "Explanation Submitted" %} - PX360</title>
    <link rel="stylesheet" href="{% static 'dist/css/tailwind.css' %}">
    <link rel="stylesheet" href="{% static 'vendor/fonts/noto-kufi-arabic/arabic.css' %}">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        body { font-family: 'Inter', 'Noto Kufi Arabic', sans-serif; }
        [dir="rtl"] body,
        [dir="rtl"] input,
        [dir="rtl"] textarea,
        [dir="rtl"] select,
        [dir="rtl"] button {
            font-family: 'Noto Kufi Arabic', sans-serif;
        }
        .success-check { animation: scaleIn 0.5s ease-out; }
        @keyframes scaleIn {
            0% { transform: scale(0); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
    </style>
</head>
<body class="bg-light min-h-screen flex items-center py-8 px-4">
    <div class="w-full max-w-2xl mx-auto">
        <!-- Main Card -->
        <div class="bg-white rounded-2xl shadow-lg border border-slate-100 overflow-hidden">
            <!-- Success Header -->
            <div class="bg-gradient-to-r from-green-500 to-green-600 p-8 text-center">
                <div class="w-20 h-20 bg-white rounded-full flex items-center justify-center mx-auto mb-4 success-check">
                    <i data-lucide="check" class="w-10 h-10 text-green-600"></i>
                </div>
                <h1 class="text-2xl font-bold text-white">{% trans "Explanation Submitted Successfully!" %}</h1>
            </div>

            <!-- Content -->
            <div class="p-8">
                <p class="text-slate text-center mb-6">
                    {% trans "Thank you for providing your explanation. It has been received and will be reviewed by the PX team." %}
                </p>

                <!-- Complaint Summary -->
                <div class="bg-light/50 rounded-xl p-5 mb-6">
                    <h2 class="text-sm font-bold text-navy mb-4 flex items-center gap-2">
                        <i data-lucide="file-text" class="w-4 h-4 text-blue"></i>
                        {% trans "Complaint Summary" %}
                    </h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
                        <div class="flex items-center gap-2">
                            <span class="text-slate">{% trans "Reference:" %}</span>
                            <span class="font-semibold text-navy">#{{ complaint.reference_number|slice:":8" }}</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <span class="text-slate">{% trans "Title:" %}</span>
                            <span class="font-semibold text-navy">{{ complaint.title }}</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <span class="text-slate">{% trans "Submitted On:" %}</span>
                            <span class="font-semibold text-navy">{{ explanation.responded_at|date:"Y-m-d H:i" }}</span>
                        </div>
                        {% if attachment_count > 0 %}
                        <div class="flex items-center gap-2">
                            <span class="text-slate">{% trans "Attachments:" %}</span>
                            <span class="font-semibold text-navy">{{ attachment_count }}</span>
                        </div>
                        {% endif %}
                    </div>
                </div>

                <!-- What Happens Next -->
                <div class="bg-blue-50 border border-blue-200 rounded-xl p-5 mb-6">
                    <h3 class="font-bold text-navy mb-3 flex items-center gap-2">
                        <i data-lucide="info" class="w-5 h-5 text-blue"></i>
                        {% trans "What Happens Next?" %}
                    </h3>
                    <ul class="space-y-2 text-sm text-slate">
                        <li class="flex items-start gap-2">
                            <i data-lucide="check-circle" class="w-4 h-4 text-blue mt-0.5 flex-shrink-0"></i>
                            <span>{% trans "Your explanation will be reviewed by the complaint assignee" %}</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <i data-lucide="check-circle" class="w-4 h-4 text-blue mt-0.5 flex-shrink-0"></i>
                            <span>{% trans "The PX team may contact you if additional information is needed" %}</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <i data-lucide="check-circle" class="w-4 h-4 text-blue mt-0.5 flex-shrink-0"></i>
                            <span>{% trans "Your explanation will be considered during the complaint investigation" %}</span>
                        </li>
                    </ul>
                </div>

                <!-- Details -->
                <div class="border-t border-slate-100 pt-6 text-center text-xs text-slate space-y-1">
                    <p><span class="font-semibold">{% trans "Explanation ID:" %}</span> {{ explanation.id }}</p>
                    <p><span class="font-semibold">{% trans "Submission Time:" %}</span> {{ explanation.responded_at|date:"Y-m-d H:i:s" }}</p>
                    <p class="mt-3">{% trans "A confirmation email has been sent to the complaint assignee." %}</p>
                </div>
            </div>

            <!-- Footer -->
            <div class="bg-light/30 border-t border-slate-100 p-4 text-center">
                <p class="text-slate text-xs">{% trans "PX360 Complaint Management System" %}</p>
            </div>
        </div>
    </div>

    <script>
        lucide.createIcons();
    </script>
</body>
</html>
