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

{% block body %}
    <div class="container">
	 <h2>
		<a href="{{ path('producta_index') }}" class="btn btn-primary">Sortie</a>
        {# <a href="{{ path('carta', { 'id' : producta.id }) }}" class="btn btn-primary">Ajouter au panier</a> #}
		 <a href="{{ path('carta') }}" class="btn btn-warning">Panier</a>
        {#  <a href="{{ path('producta_new') }}">Create new</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 producta in productas %}
                    
                    <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 src="{{ asset("uploads/") ~ producta.illustration  }} " alt="titi" class="img-fluid" />
                            {#<img class="card-img-top" src="/uploads/{{ producta.illustration }}" alt="polo" /> #}
                            
                            <!-- Product details-->
                            <div class="card-body p-4">
                                <div class="text-center">
                                    <!-- Product name-->
                                    <h5 class="fw-bolder">Nom : {{ producta.name }}</h5>
                                    <h5 class="fw-bolder">Id : {{ producta.id }}</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">{{ producta.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('producta_show', {id: producta.id}) }}">Inscription</a></div>
                                <div class="text-center"><a class="btn btn-outline-red mt-auto" href="{{ path('producta_show', {id: producta.id}) }}">Detail</a></div>
                                
                                
                            </div>
                        </div>
                    </div>
           
                    {% endfor %}
                </div>
            </div>
        </section>
  
                         
{% endblock %}