{% extends "_base.html" %}

{% block title %}Security Validation Failed{% endblock %}

{% block extra_animations %}
'shield-pulse': 'shieldPulse 2s ease-in-out infinite',
'warning-flash': 'warningFlash 1s ease-in-out infinite',
'glow': 'glow 2s ease-in-out infinite alternate',
{% endblock %}

{% block extra_keyframes %}
shieldPulse: {
    '0%, 100%': { transform: 'scale(1)', opacity: '0.8' },
    '50%': { transform: 'scale(1.05)', opacity: '1' },
},
warningFlash: {
    '0%, 100%': { opacity: '1' },
    '50%': { opacity: '0.5' },
},
glow: {
    '0%': { boxShadow: '0 0 20px rgba(239, 68, 68, 0.3)' },
    '100%': { boxShadow: '0 0 30px rgba(239, 68, 68, 0.6)' },
},
{% endblock %}

{% block background %}
<div class="absolute inset-0 bg-gradient-to-br from-red-900/20 via-portal-bg to-orange-900/20">
    <div class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg width=&quot;60&quot; height=&quot;60&quot; viewBox=&quot;0 0 60 60&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;%3E%3Cg fill=&quot;none&quot; fill-rule=&quot;evenodd&quot;%3E%3Cg fill=&quot;%23EF4444&quot; fill-opacity=&quot;0.03&quot;%3E%3Cpath d=&quot;M30 5l5 20h20l-16 12 6 19-15-11-15 11 6-19-16-12h20z&quot;/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')] opacity-20"></div>
</div>
{% endblock %}

{% block content %}
<div class="mb-8 animate-float">
    <div class="relative">
        <svg class="w-32 h-32 mx-auto text-red-500 opacity-90 animate-shield-pulse" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M12,7C13.4,7 14.8,8.6 14.8,10V11.5C15.4,11.5 16,12.4 16,13V16C16,17.4 15.4,18 14.8,18H9.2C8.6,18 8,17.4 8,16V13C8,12.4 8.6,11.5 9.2,11.5V10C9.2,8.6 10.6,7 12,7M12,8.2C11.2,8.2 10.5,8.7 10.5,10V11.5H13.5V10C13.5,8.7 12.8,8.2 12,8.2Z"/>
        </svg>
        <div class="absolute -top-2 -right-2">
            <svg class="w-8 h-8 text-yellow-500 animate-warning-flash" fill="currentColor" viewBox="0 0 24 24">
                <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
            </svg>
        </div>
    </div>
</div>

<div class="mb-8">
    <h1 class="text-4xl md:text-5xl font-display font-bold text-white mb-4">
        Security Validation Failed
    </h1>
    <p class="text-xl md:text-2xl text-gray-300 mb-6 leading-relaxed">
        🛡️ Our security system detected an issue with your request
    </p>
    <p class="text-lg text-gray-400 max-w-2xl mx-auto mb-4">
        This usually happens when your security token has expired or is missing.
        Don't worry - this is our way of keeping your data safe!
    </p>
</div>

<div class="mb-8 p-6 bg-red-900/20 border border-red-500/30 rounded-lg animate-glow">
    <div class="flex items-center justify-center gap-3 text-red-400 mb-4">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1Z"/>
        </svg>
        <span class="font-semibold text-lg">CSRF PROTECTION ACTIVE</span>
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1Z"/>
        </svg>
    </div>
    <p class="text-red-300 text-sm">
        Cross-Site Request Forgery protection is working as intended
    </p>
</div>

<div class="mb-8 p-4 bg-portal-bg-alt/50 rounded-lg border border-yellow-500/20">
    <h3 class="text-yellow-400 font-semibold text-lg mb-3">What should I do?</h3>
    <div class="text-gray-300 text-left max-w-md mx-auto space-y-2">
        <div class="flex items-start gap-2">
            <span class="text-yellow-400 mt-1">1.</span>
            <span>Refresh this page to get a new security token</span>
        </div>
        <div class="flex items-start gap-2">
            <span class="text-yellow-400 mt-1">2.</span>
            <span>Try your action again</span>
        </div>
        <div class="flex items-start gap-2">
            <span class="text-yellow-400 mt-1">3.</span>
            <span>If the problem persists, clear your browser cache</span>
        </div>
    </div>
</div>

<div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
    <button onclick="window.location.reload()"
            class="group bg-ctf-primary hover:bg-yellow-500 text-portal-bg font-semibold px-8 py-4 rounded-lg transition-all duration-300 transform hover:scale-105 hover:shadow-lg hover:shadow-ctf-primary/25 flex items-center gap-2">
        <svg class="w-5 h-5 group-hover:animate-spin" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd"/>
        </svg>
        Refresh Page
    </button>

    <a href="{{ back_url }}"
       class="group bg-transparent border-2 border-red-500 hover:bg-red-500 hover:text-white text-red-500 font-semibold px-8 py-4 rounded-lg transition-all duration-300 transform hover:scale-105 flex items-center gap-2">
        <svg class="w-5 h-5 group-hover:animate-bounce" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"/>
        </svg>
        {{ back_label }}
    </a>
</div>

<div class="mt-12 p-4 bg-portal-bg-alt/30 rounded-lg border border-gray-600/20 text-xs text-gray-500">
    <details class="cursor-pointer">
        <summary class="hover:text-gray-400 transition-colors">Technical Details</summary>
        <div class="mt-2 text-left">
            <p><strong>Error:</strong> CSRF token validation failed</p>
            <p><strong>Protection:</strong> Cross-Site Request Forgery (CSRF) middleware</p>
            <p><strong>Solution:</strong> Refresh page to obtain new security token</p>
        </div>
    </details>
</div>
{% endblock %}

{% block floating_elements %}
<div class="absolute top-10 left-10 text-red-500/20 animate-float">
    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
        <path d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1Z"/>
    </svg>
</div>

<div class="absolute bottom-10 right-10 text-yellow-500/20 animate-warning-flash">
    <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
        <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
    </svg>
</div>

<div class="absolute top-1/3 right-20 text-red-500/10 animate-float">
    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
        <path d="M18,8A6,6 0 0,0 12,2A6,6 0 0,0 6,8H4A2,2 0 0,0 2,10V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V10A2,2 0 0,0 20,8H18M12,4A4,4 0 0,1 16,8H8A4,4 0 0,1 12,4Z"/>
    </svg>
</div>
{% endblock %}