{% extends "base.html" %}
{% block title %}Server Error{% endblock title %}
{% block content %}
    <div class="columns is-centered">
        <div class="column is-8-tablet is-6-desktop">
            <div class="box has-text-centered p-5">
                <span class="icon is-large has-text-danger mb-4">
                    <i class="fas fa-server fa-3x"></i>
                </span>
                
                <h1 class="title is-3 mb-4">Server Error</h1>
                
                <p class="subtitle is-5 mb-5">
                    Something went wrong on our end.
                </p>
                
                <div class="notification is-light is-danger">
                    <p>
                        <span class="icon">
                            <i class="fas fa-exclamation-triangle"></i>
                        </span>
                        We've encountered an internal server error. Our team has been notified and is working to fix the issue.
                    </p>
                </div>
                
                <p class="mt-5">
                    <a href="{% url 'landing_page' %}" class="button is-link">
                        <span class="icon">
                            <i class="fas fa-home"></i>
                        </span>
                        <span>Return to Home</span>
                    </a>
                </p>
            </div>
        </div>
    </div>
{% endblock content %}