{% load i18n %}
{% load static %}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ _("Invalid Survey Link") }} - 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@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;
        }
    </style>
</head>
<body class="bg-gray-100 p-4 md:p-10 min-h-screen flex items-center justify-center">

    <div class="max-w-4xl w-full bg-white shadow-2xl relative overflow-hidden border-t-[20px] border-navy">

        <!-- Header -->
        <div class="p-8 pb-4 flex justify-between items-start">
            <div class="flex items-center">
                <img src="{% static 'img/HH_P_H_Logo.png' %}" alt="HH Hospital" class="h-10 md:h-12 object-contain">
            </div>
            <div class="text-end">
                <h1 class="text-2xl font-bold text-[#2c3e50]">{% trans "Invalid" %}</h1>
                <h1 class="text-2xl font-bold text-[#2c3e50]">{% trans "Survey Link" %}</h1>
            </div>
        </div>

        <!-- Body -->
        <div class="px-8 md:px-10 py-8 text-center text-[#2c3e50]">

            <!-- Error Icon -->
            <div class="w-24 h-24 bg-red-500 rounded-full flex items-center justify-center mx-auto mb-8">
                <svg class="w-12 h-12 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
                </svg>
            </div>

            <!-- Message -->
            <p class="text-lg text-gray-600 max-w-md mx-auto leading-relaxed mb-8">
                {{ _("We're sorry, but this survey link is no longer valid or has expired") }}.
            </p>

            <!-- Reasons -->
            <div class="bg-gray-50 rounded-xl p-6 max-w-lg mx-auto mb-8 text-start">
                <p class="font-bold text-base mb-4">{% trans "This could be because:" %}</p>
                <ul class="space-y-3 text-gray-600 text-sm">
                    <li class="flex items-start gap-2">
                        <span class="text-red-400 mt-0.5 flex-shrink-0">
                            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg>
                        </span>
                        {{ _("The survey has already been completed") }}
                    </li>
                    <li class="flex items-start gap-2">
                        <span class="text-red-400 mt-0.5 flex-shrink-0">
                            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg>
                        </span>
                        {{ _("The link has expired (surveys are valid for 30 days)") }}
                    </li>
                    <li class="flex items-start gap-2">
                        <span class="text-red-400 mt-0.5 flex-shrink-0">
                            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg>
                        </span>
                        {{ _("The link was entered incorrectly") }}
                    </li>
                    <li class="flex items-start gap-2">
                        <span class="text-red-400 mt-0.5 flex-shrink-0">
                            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg>
                        </span>
                        {{ _("The survey has been canceled") }}
                    </li>
                </ul>
            </div>

            <!-- Contact Info -->
            <p class="text-sm text-gray-400">
                {{ _("If you believe this is an error, please contact your healthcare provider for assistance") }}.
            </p>
        </div>

        <!-- Footer -->
        <div class="mt-8 bg-navy text-white p-8 pb-16 text-center space-y-1">
            <p class="text-sm font-medium">PX360</p>
            <p class="text-sm font-medium opacity-75">Patient Experience Platform</p>
            <p class="text-xs font-medium opacity-50 mt-1">
                Powered by <a href="https://tenhal.sa" target="_blank" class="text-white hover:underline">tenhal.sa</a>
            </p>
        </div>

        <!-- Decorative Corner Triangles -->
        <div class="absolute bottom-0 left-0 w-full h-12 pointer-events-none z-10">
            <div class="absolute bottom-0 left-0 border-r-[100px] border-b-[50px] border-r-transparent border-b-navy-dark"></div>
            <div class="absolute bottom-0 right-0 border-l-[100px] border-b-[50px] border-l-transparent border-b-navy-dark"></div>
        </div>
    </div>

</body>
</html>
