{% import "macros/article.html.twig" as articleMacro %}
<div class="product product-2">
<figure class="product-media">
{# <span class="product-label label-circle label-top">Top</span> #}
{% if article.etat == 'New' %}
<span class="product-label label-new">Nouveau</span>
{% endif %}
<a {{ articleMacro.href_show(article) }}>
{% for article in article.images|slice(0,1) %}
<img class="product-image" src="{{ asset('img/article/' ~ article.name ) }}" alt="...">
{% else %}
<img src="{{ asset('img/vide.png') }}" alt="Product image" class="product-image">
{% endfor %}
{# <img src="assets/images/demos/demo-4/products/product-1.jpg" alt="Product image" class="product-image"> #}
</a>
<div class="product-action-vertical">
{{ articleMacro.wishlist(article)}}
</div>
<!-- End .product-action -->
<div class="product-action">
{{ articleMacro.card_add(article)}}
{# <a href="popup/quickView.html" class="btn-product btn-quickview" title="Quick view">
<span>quick view</span>
</a> #}
</div>
<!-- End .product-action -->
</figure>
<!-- End .product-media -->
<div class="product-body">
<div class="product-cat">
<a {{ articleMacro.href_category(article)}}>
{{ article.category.title }}
</a>
</div>
<!-- End .product-cat -->
<h3 class="product-title">
<a {{ articleMacro.href_show(article) }}>{{ article.title }}</a>
</h3>
<!-- End .product-title -->
<div class="product-price">
{{ articleMacro.price(article) }}
</div>
<!-- End .product-price -->
<div class="ratings-container">
<div class="ratings">
<div class="ratings-val" {{ ratingStyle(article) }}></div>
<!-- End .ratings-val -->
</div>
<!-- End .ratings -->
<span class="ratings-text">
({{ article.comments|length}}
<i class="fas fa-comment"></i>)
</span>
</div>
<!-- End .rating-container -->
</div>
<!-- End .product-body -->
</div>
<!-- End .product -->