{% extends "base.html" %}

{% block title %}Server Error - Moto Adventure{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-50 py-20">
    <div class="max-w-2xl mx-auto text-center">
        <div class="bg-white rounded-lg shadow-lg p-8">
            <div class="mb-6">
                <i class="fas fa-tools text-red-500 text-6xl mb-4"></i>
                <h1 class="text-4xl font-bold text-gray-900 mb-2">500 - Server Error</h1>
                <p class="text-xl text-gray-600">
                    Something went wrong on our end. We're working to fix it!
                </p>
            </div>
            
            <div class="bg-gradient-to-r from-red-50 to-orange-50 rounded-lg p-6 mb-6">
                <p class="text-gray-700 mb-4">
                    Our technical team has been notified and is working to resolve the issue. 
                    Please try again in a few moments.
                </p>
            </div>
            
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a href="{{ url_for('main.index') }}" class="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-6 py-3 rounded-lg font-semibold hover:from-blue-700 hover:to-purple-700 transition transform hover:scale-105">
                    <i class="fas fa-home mr-2"></i>Back to Home
                </a>
                <button onclick="window.location.reload()" class="border-2 border-blue-600 text-blue-600 px-6 py-3 rounded-lg font-semibold hover:bg-blue-600 hover:text-white transition transform hover:scale-105">
                    <i class="fas fa-redo mr-2"></i>Try Again
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}