{% 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 %}