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

{% block body %}
    <div class="cart-layout container mx-auto py-10 px-4">
        <div class="account-profil__header mb-10">
            <div class="account-profil__title-group">
                <h2 class="account-profil__title">Choisissez un moyen de paiement</h2>
                <p class="account-profil__subtitle">
                    Veuillez sélectionner le mode de paiement souhaité pour finaliser votre commande.
                </p>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {% for paymentMethod in paymentMethods %}
                <div class="account-box flex flex-col justify-between">
                    <div>
                        <h3 class="text-lg font-semibold text-gray-800 mb-2">{{ paymentMethod.name }}</h3>
                        <p class="text-sm text-gray-600 mb-4">{{ paymentMethod.description }}</p>
                    </div>
                    <a href="{{ path('cart_payment', { id: paymentMethod.id }) }}" class="btn btn-primary mt-auto w-full text-center">
                        Choisir ce moyen de paiement
                    </a>
                </div>
            {% endfor %}
        </div>

        <div class="mt-10">
            <a href="{{ path('cart_index') }}" class="btn btn-secondary">
                ← Retour au panier
            </a>
        </div>
    </div>
{% endblock %}