{% extends "base.html" %}
{% load i18n static %}
{% block content %}
    <main class="main">
        <!-- Page Title -->
        <div class="page-title light-background">
            <div class="container d-lg-flex justify-content-between align-items-center">
                <h1 class="mb-2 mb-lg-0">{% trans "Payment Failed" %}</h1>
                <nav class="breadcrumbs">
                    <ol>
                        <li>
                            <a href="{% url 'home' %}">{% trans "Home" %}</a>
                        </li>
                        <li class="current">{% trans "Failed" %}</li>
                    </ol>
                </nav>
            </div>
        </div>
        <!-- End Page Title -->
        <!-- Failed Section -->
        <section class="section">
            <div class="container text-center" data-aos="fade-up">
                <div class="py-5">
                    <i class="bi bi-x-circle-fill text-danger" style="font-size: 5rem;"></i>
                    <h2 class="mt-4">{% trans "Payment Failed" %}</h2>
                    {% if message %}
                        <p class="lead">{{ message }}.</p>
                    {% else %}
                        <p class="lead">{% trans "We couldn't process your payment. Please try again" %}.</p>
                    {% endif %}
                    <a href="{% url 'home' %}" class="btn btn-phoenix-primary mt-3">
                        <i class="bi bi-house-door"></i> {% trans "Back to Home" %}
                    </a>
                </div>
            </div>
        </section>
        <!-- /Failed Section -->
    </main>
{% endblock content %}