{% extends "base.html" %}

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

{% block content %}
<div class="container text-center" style="min-height: 70vh; display: flex; align-items: center; justify-content: center;">
    <div>
        <i class="fas fa-server text-danger" style="font-size: 5rem;"></i>
        <h1 class="display-1 mt-4">500</h1>
        <h2>Internal Server Error</h2>
        <p class="lead text-muted mt-3">
            Something went wrong on our end. We're working to fix it!
        </p>
        <div class="mt-4">
            <a href="{{ url_for('index') }}" class="btn btn-primary btn-lg">
                <i class="fas fa-home"></i> Go Home
            </a>
            <button onclick="window.location.reload()" class="btn btn-outline-primary btn-lg">
                <i class="fas fa-sync-alt"></i> Try Again
            </button>
        </div>
    </div>
</div>
{% endblock %}