{% extends 'base.html.twig' %}

{% block body %}
<section class="confirmation-page py-5">
    <div class="container">
        <div class="confirmation-card text-center mx-auto" style="max-width: 640px;">
            <div class="confirmation-icon mb-4">
                <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="color: var(--secondary, #F59E0B);">
                    <circle cx="12" cy="12" r="10"/>
                    <line x1="15" y1="9" x2="9" y2="15"/>
                    <line x1="9" y1="9" x2="15" y2="15"/>
                </svg>
            </div>

            <h1 class="confirmation-title mb-3">Paiement annule</h1>

            <p class="confirmation-text text-muted mb-4">
                Votre commande <strong>{{ order.reference }}</strong> n'a pas ete payee.
                <br>Elle reste enregistree — vous pouvez reessayer ou nous contacter.
            </p>

            <div class="d-flex gap-3 justify-content-center flex-wrap">
                <a href="{{ path('app_product_index') }}" class="btn btn-primary">
                    Retour au catalogue
                </a>
                <a href="{{ path('app_contact') }}" class="btn btn-outline-secondary">
                    Nous contacter
                </a>
            </div>
        </div>
    </div>
</section>
{% endblock %}