{% for product in products %}
<div class="col-md-3 col-sm-6">
{# <div class="col-lg-3 col-md-4 col-sm-6 px-2 mb-4">#}
<div class="card product-card">
<div class="product-card-actions d-flex align-items-center">
<button class="btn-wishlist btn-sm" name="{{ path('add_product_to_wishlist', {'id':product.id}) }}" type="button" data-toggle="tooltip" data-placement="left" title="Mettre de côté"><i class="czi-heart"></i></button>
</div><a class="card-img-top d-block overflow-hidden" href="{{ path('display_product', {'leSlug': product.leSlug}) }}">
{% if product.imagePrincipale is not null %}
<img src="{{ product.imagePrincipale.url }}" alt="{{ product.nom }}">
{% endif %}
</a>
<div class="card-body py-2">
{% if product.subCategory is not null %}
<a class="product-meta d-block font-size-xs pb-1" href="{{ path('product_by_sub_category', {'slug': product.subCategory.slug}) }}">{{ product.subCategory.nom }}</a>
{% endif %}
{% if product.stockDisponible < 1 %}
<div class="d-flex justify-content-between">
<div class="product-price"><span class="text-muted font-size-sm">En rupture de stock</span></div>
</div>
<br/>
{% endif %}
<h3 class="product-title font-size-sm"><a href="{{ path('display_product', {'leSlug': product.leSlug}) }}">
<span title="{{ product.nom }}">
{% if product.nom | length > 30 %}
{{ product.nom | slice(0, 29) }}...
{% else %}
{{ product.nom }}
{% endif %}
</span>
</a></h3>
<div class="d-flex justify-content-between">
<div class="product-price"><span class="text-accent formated-number">{{ product.price }}</span> {{ devise }}</div>
<div class="star-rating"><i class="sr-star czi-star-filled active"></i><i class="sr-star czi-star-filled active"></i><i class="sr-star czi-star-filled active"></i><i class="sr-star czi-star-filled active"></i><i class="sr-star czi-star-filled active"></i>
</div>
</div>
</div>
{% if product.stockDisponible < 1 %}
<div class="card-body card-body-hidden"><a class="btn btn-secondary btn-sm btn-block mb-2" href="{{ path('display_product', {'leSlug':product.leSlug}) }}">Voir produit</a>
</div>
{% else %}
<div class="card-body card-body-hidden">
<form action="{{ path('add_to_cart') }}">
<input type="hidden" name="product" value="{{ product.id }}" />
<input type="hidden" name="quantity" value="1" />
<button class="btnAddToCart btn btn-primary btn-sm btn-block mb-2" type="button" data-toggle="toast" data-target="#cart-toast"><i class="czi-cart font-size-sm mr-1"></i>Ajouter au panier</button>
</form>
</div>
{% endif %}
</div>
<hr class="d-sm-none">
</div>
{% endfor %}