{% extends "shop/base.html" %}
{% load i18n %}

{% block title %}{% trans "Payment Failed" %} - Fursuit Shop{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="text-center">
        <i class="bi bi-exclamation-circle text-danger display-1 mb-4"></i>
        
        <h1 class="h2 mb-4">{% trans "Payment Failed" %}</h1>
        
        <p class="text-muted mb-4">
            {% trans "We're sorry, but there was a problem processing your payment." %}
            <br>
            {% trans "Please try again or choose a different payment method." %}
        </p>
        
        {% if order.payment_errors.exists %}
            <div class="alert alert-danger mx-auto" style="max-width: 500px;">
                <h6 class="alert-heading">{% trans "Error Details" %}:</h6>
                {% for error in order.payment_errors.all|slice:"-1:" %}
                    <p class="mb-0">{{ error.error_message }}</p>
                {% endfor %}
            </div>
        {% endif %}
        
        <div class="d-flex justify-content-center gap-3">
            <a href="{% url 'shop:checkout' %}" class="btn btn-primary">
                <i class="bi bi-arrow-left"></i>
                {% trans "Return to Checkout" %}
            </a>
            
            <a href="{% url 'shop:contact' %}" class="btn btn-outline-primary">
                <i class="bi bi-envelope"></i>
                {% trans "Contact Support" %}
            </a>
        </div>
    </div>
</div>
{% endblock %}