{% 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 "Already 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;
        }
        .info-icon { animation: pulse 2s infinite; }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.8; }
        }
    </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">
            <!-- Warning Header -->
            <div class="bg-gradient-to-r from-orange-500 to-orange-600 p-8 text-center">
                <div class="w-20 h-20 bg-white rounded-full flex items-center justify-center mx-auto mb-4 info-icon">
                    <i data-lucide="alert-triangle" class="w-10 h-10 text-orange-500"></i>
                </div>
                <h1 class="text-2xl font-bold text-white">{% trans "Already Submitted" %}</h1>
            </div>

            <!-- Content -->
            <div class="p-8">
                <p class="text-slate text-center mb-6">
                    {% trans "This explanation link has already been used. Each explanation link can only be used once." %}
                </p>

                <!-- Complaint Information -->
                <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 Information" %}
                    </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>
                        {% if explanation.responded_at %}
                        <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>
                        {% endif %}
                        {% if explanation.staff %}
                        <div class="flex items-center gap-2">
                            <span class="text-slate">{% trans "Submitted By:" %}</span>
                            <span class="font-semibold text-navy">{{ explanation.staff }}</span>
                        </div>
                        {% endif %}
                    </div>
                </div>

                <!-- What If Update Needed -->
                <div class="bg-orange-50 border border-orange-200 rounded-xl p-5 mb-6">
                    <h3 class="font-bold text-navy mb-3 flex items-center gap-2">
                        <i data-lucide="help-circle" class="w-5 h-5 text-orange-500"></i>
                        {% trans "What If You Need To Update?" %}
                    </h3>
                    <p class="text-sm text-slate">
                        {% trans "If you need to provide additional information or make changes to your explanation, please contact the PX team directly." %}
                    </p>
                </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 "Status:" %}</span> {% trans "Already Submitted" %}</p>
                    <div class="mt-4 inline-flex items-center gap-2 px-4 py-2 bg-slate-100 rounded-lg">
                        <i data-lucide="lock" class="w-4 h-4 text-slate"></i>
                        <span class="font-semibold">{% trans "This link cannot be used again." %}</span>
                    </div>
                </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>
