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

{% block body %}
    <div class="container">
	 <h2>
		<a href="{{ path('product_index') }}" class="btn btn-primary">Sortie</a>
		<a href="{{ path('cart_index') }}" class="btn btn-warning">Pannier</a></h2>
               
    </div>

    <section class="py-5">
            <div class="container px-4 px-lg-5 mt-5">
                <div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
                     {% for product in products %}
                    
                    <div class="col mb-5">
                        <div class="card h-100">
                            <!-- Sale badge-->
                            <div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
                            <!-- Product image-->
                            <img class="card-img-top" src="{{ product.description }}" alt="polo" />
                            <!-- Product details-->
                            <div class="card-body p-4">
                                <div class="text-center">
                                    <!-- Product name-->
                                    <h5 class="fw-bolder">{{ product.name }}</h5>
                                    <!-- Product reviews-->
                                    <div class="d-flex justify-content-center small text-warning mb-2">
                                        <div class="bi-star-fill"></div>
                                        <div class="bi-star-fill"></div>
                                        <div class="bi-star-fill"></div>
                                        <div class="bi-star-fill"></div>
                                        <div class="bi-star-fill"></div>
                                    </div>
                                    <!-- Product price-->

                                    <span class="text-muted text-decoration-line: none">{{ product.price }} €</span>
                                    
                                </div>
                            </div>
                            <!-- Product actions-->
                            <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                                <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="{{ path('product.detail', {id: product.id}) }}">Inscription</a></div>
                                
                            </div>
                        </div>
                    </div>
           
                    {% endfor %}
                </div>
            </div>
        </section>
  
                         
{% endblock %}