{% extends "base.html" %}

{% block title %}500 - Serverfehler{% endblock %}

{% block content %}
<div class="min-h-[75vh] flex flex-col items-center justify-center px-4 py-12 bg-gradient-to-b from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
    <div class="glass-effect max-w-2xl w-full p-6 md:p-10 rounded-xl border border-gray-300/20 dark:border-gray-700/30 shadow-xl transform transition-all duration-300 hover:shadow-2xl">
        <div class="text-center">
            <div class="flex justify-center mb-6">
                <div class="relative">
                    <h1 class="text-7xl md:text-8xl font-extrabold text-primary-600 dark:text-primary-400 opacity-90">500</h1>
                    <div class="absolute -top-4 -right-4 w-12 h-12 bg-red-600 rounded-full flex items-center justify-center animate-pulse">
                        <i class="fa-solid fa-exclamation-triangle text-white text-xl"></i>
                    </div>
                </div>
            </div>
            <h2 class="text-2xl md:text-3xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Interner Serverfehler</h2>
            <p class="text-gray-600 dark:text-gray-300 mb-8 max-w-lg mx-auto text-base md:text-lg">Es ist ein Fehler auf unserem Server aufgetreten. Unser Team wurde informiert und arbeitet bereits an einer Lösung. Bitte versuchen Sie es später erneut.</p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a href="{{ url_for('index') }}" class="btn-primary transform transition-transform duration-300 hover:scale-105 px-6 py-3 rounded-lg">
                    <i class="fa-solid fa-home mr-2"></i>Zur Startseite
                </a>
                <a href="javascript:history.back()" class="btn-secondary transform transition-transform duration-300 hover:scale-105 px-6 py-3 rounded-lg">
                    <i class="fa-solid fa-arrow-left mr-2"></i>Zurück
                </a>
            </div>
        </div>
    </div>
    <div class="mt-8 text-sm text-gray-500 dark:text-gray-400">
        <p>Benötigen Sie Hilfe? <a href="#" class="text-primary-600 dark:text-primary-400 hover:underline">Kontaktieren Sie uns</a></p>
    </div>
</div>
{% endblock %}