{% extends 'base.html' %}
{% load static %}

{% block title %}500 - Server Error | Graduate Women Zambia{% endblock %}

{% block content %}
<div class="container py-5 min-vh-75 d-flex align-items-center">
    <div class="row justify-content-center w-100">
        <div class="col-md-8 text-center">
            <div class="error-page mb-4">
                <!-- <img src="{% static 'images/errors/500.svg' %}" alt="500 illustration" class="img-fluid mb-4" style="max-width: 300px;"> -->
                <h1 class="display-4 mb-3">Server Error</h1>
                <p class="lead text-muted mb-4">We're experiencing some technical difficulties. Our team has been notified and is working to fix the issue. Please try again later.</p>
                <div class="d-flex justify-content-center gap-3">
                    <a href="{% url 'home' %}" class="btn btn-primary">
                        <i class="fas fa-home me-2"></i>Return Home
                    </a>
                    <a href="{% url 'contact:contact' %}" class="btn btn-outline-primary">
                        <i class="fas fa-envelope me-2"></i>Report Issue
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.min-vh-75 {
    min-height: 75vh;
}

.error-page {
    animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>
{% endblock %}