{% extends "_base.html" %}

{% block title %}500 - Server Error{% endblock %}

{% block extra_animations %}
'spin-slow': 'spin 3s linear infinite',
'glitch': 'glitch 2s infinite',
'flicker': 'flicker 1.5s infinite',
{% endblock %}

{% block extra_keyframes %}
glitch: {
    '0%, 100%': { transform: 'translate(0)' },
    '20%': { transform: 'translate(-2px, 2px)' },
    '40%': { transform: 'translate(-2px, -2px)' },
    '60%': { transform: 'translate(2px, 2px)' },
    '80%': { transform: 'translate(2px, -2px)' },
},
flicker: {
    '0%, 100%': { opacity: '1' },
    '50%': { opacity: '0.3' },
},
{% endblock %}

{% block background %}
<div class="absolute inset-0 bg-gradient-to-br from-orange-900/20 via-portal-bg to-red-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;%23F59E0B&quot; fill-opacity=&quot;0.05&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">
    <h1 class="text-9xl md:text-[12rem] font-display font-bold text-orange-500 animate-glitch leading-none">
        5<span class="animate-flicker inline-block">0</span>0
    </h1>
</div>

<div class="mb-8 animate-float">
    <div class="relative">
        <svg class="w-32 h-32 mx-auto text-orange-500 opacity-80 animate-spin-slow" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4M12,6A6,6 0 0,0 6,12A6,6 0 0,0 12,18A6,6 0 0,0 18,12A6,6 0 0,0 12,6M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8Z"/>
        </svg>
        <div class="absolute -top-2 -right-2">
            <svg class="w-8 h-8 text-red-500 animate-bounce" fill="currentColor" viewBox="0 0 24 24">
                <path d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/>
            </svg>
        </div>
        <div class="absolute -bottom-2 -left-2">
            <svg class="w-6 h-6 text-yellow-500 animate-pulse" fill="currentColor" viewBox="0 0 24 24">
                <path d="M7.5,4A5.5,5.5 0 0,0 2,9.5C2,10 2.04,10.5 2.12,11H22C22,6.03 18.5,2 12,2C10.5,2 9,2.26 7.5,4Z"/>
            </svg>
        </div>
    </div>
</div>

<div class="mb-8">
    <h2 class="text-4xl md:text-5xl font-display font-bold text-white mb-4">
        Technical Difficulties!
    </h2>
    <p class="text-xl md:text-2xl text-gray-300 mb-6 leading-relaxed">
        Houston, we have a problem! 🚨
    </p>
    <p class="text-lg text-gray-400 max-w-2xl mx-auto">
        Our servers are having a bit of a meltdown - probably too much coffee and not enough sleep.
        Our tech wizards are frantically typing away to fix this mess!
    </p>
</div>

<div class="mb-8 p-4 bg-orange-900/20 border border-orange-500/30 rounded-lg">
    <div class="flex items-center justify-center gap-3 text-orange-400">
        <div class="flex gap-1">
            <div class="w-3 h-3 bg-red-500 rounded-full animate-pulse"></div>
            <div class="w-3 h-3 bg-yellow-500 rounded-full animate-pulse" style="animation-delay: 0.2s"></div>
            <div class="w-3 h-3 bg-orange-500 rounded-full animate-pulse" style="animation-delay: 0.4s"></div>
        </div>
        <span class="font-semibold">SYSTEM STATUS: HAVING A MOMENT</span>
        <svg class="w-6 h-6 animate-spin" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"/>
        </svg>
    </div>
</div>

<div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
    <a href="{{ back_url }}"
       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-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>

    <button onclick="window.location.reload()"
            class="group bg-transparent border-2 border-orange-500 hover:bg-orange-500 hover:text-white text-orange-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-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>
        Try Again (Maybe?)
    </button>
</div>

<div class="mt-12 p-6 bg-portal-bg-alt/50 rounded-lg border border-orange-500/20 backdrop-blur-sm">
    <p class="text-orange-400 font-display text-lg italic">
        "It's not a bug, it's an unplanned feature demonstration!"
    </p>
    <p class="text-gray-400 text-sm mt-2">- Optimistic Developer</p>
</div>

<div class="mt-8 flex justify-center">
    <div class="flex gap-1">
        <div class="w-2 h-2 bg-ctf-primary rounded-full animate-bounce"></div>
        <div class="w-2 h-2 bg-ctf-primary rounded-full animate-bounce" style="animation-delay: 0.1s"></div>
        <div class="w-2 h-2 bg-ctf-primary rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
        <div class="w-2 h-2 bg-ctf-primary rounded-full animate-bounce" style="animation-delay: 0.3s"></div>
        <div class="w-2 h-2 bg-ctf-primary rounded-full animate-bounce" style="animation-delay: 0.4s"></div>
    </div>
</div>
{% endblock %}

{% block floating_elements %}
<div class="absolute top-10 left-10 text-orange-500/20 animate-bounce-slow">
    <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
        <path d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/>
    </svg>
</div>

<div class="absolute bottom-10 right-10 text-red-500/20 animate-pulse">
    <svg class="w-12 h-12" fill="currentColor" viewBox="0 0 24 24">
        <path d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"/>
    </svg>
</div>

<div class="absolute top-1/3 right-20 text-yellow-500/10 animate-float">
    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
        <path d="M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z"/>
    </svg>
</div>
{% endblock %}