{% load wagtailcore_tags wagtailimages_tags i18n %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% translate "Server Error" %}</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <div class="error-page">
        <div class="container mx-auto px-4 py-16 text-center">
            <h1 class="text-6xl font-bold text-gray-800 mb-4">500</h1>
            
            {% if request.error_page %}
                <h2 class="text-3xl font-semibold text-gray-600 mb-6">{{ request.error_page.heading }}</h2>
                
                {% if request.error_page.image %}
                    <div class="mb-8">
                        {% image request.error_page.image width-400 class="mx-auto rounded-lg" %}
                    </div>
                {% endif %}
                
                {% if request.error_page.message %}
                    <div class="prose prose-lg mx-auto mb-8">
                        {{ request.error_page.message|richtext }}
                    </div>
                {% endif %}
            {% else %}
                <h2 class="text-3xl font-semibold text-gray-600 mb-6">{% translate "Server Error" %}</h2>
                <p class="text-lg text-gray-600 mb-8">
                    {% translate "An internal server error occurred. Please try again later." %}
                </p>
            {% endif %}

            <div class="space-x-4">
                <a href="/" class="inline-block px-6 py-3 bg-gray-800 text-white rounded-lg hover:bg-gray-700 transition-colors">
                    {% translate "Go Home" %}
                </a>
                <button onclick="history.back()" class="inline-block px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
                    {% translate "Go Back" %}
                </button>
            </div>
        </div>
    </div>
</body>
</html>