{% extends "base.html" %}
{% block title %}
    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-exclamation-circle fa-3x"></i>
                </span>
                <h1 class="title is-3 mb-4">Something Went Wrong</h1>
                <p class="subtitle is-5 mb-5">We encountered an error while processing your request.</p>
                <div class="notification is-light is-danger">
                    <p>
                        <span class="icon">
                            <i class="fas fa-bug"></i>
                        </span>
                        An unexpected error has occurred. Please try again later or contact support if the problem persists.
                    </p>
                </div>
                <div class="buttons is-centered mt-5">
                    <a href="javascript:history.back()" class="button is-light">
                        <span class="icon">
                            <i class="fas fa-arrow-left"></i>
                        </span>
                        <span>Go Back</span>
                    </a>
                    <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>
                </div>
            </div>
        </div>
    </div>
{% endblock content %}