{% if produits|length > 0 %}
    <div class="row portfolio-container filter" data-aos="fade-up" data-aos-delay="200">
    {% for produit in produits %}
        {% if produit.isActif %}
        <div class="col-lg-4 col-md-6 filter-item portfolio-item {% for cat in produit.categorie %}filter-{{ cat.translations[app.request.locale].slug }} {% endfor %}">
            <div class="portfolio-img">
                <img src="{{ asset(produitImg ~ produit.imageProduits[0].name) }}" class="img-fluid" alt="{{ produit.translations[app.request.locale].name|default('') }}" loading="lazy">
                {% if produit.promotion %}
                    <div class="promotion">Promotion {{ produit.promotion }}%</div>
                {% endif %}
                {% if produit.nouveaute %}
                    <div class="nouveaute position-absolute z-3 rounded-3 p-10">Nouveaute</div>
                {% endif %}
            </div>
            <div class="portfolio-info">
                <a href="{{ path('app_produit', {'_locale': app.request.locale, 'slug':produit.translations[app.request.locale].slug|default('produit'), 'id':produit.id}) }}">{{ produit.translations[app.request.locale].name|default('') }}</a>
                <p>{{ produit.translations[app.request.locale].description|default('')|striptags|slice(0, 50)|raw }}...</p>
                <a href="{{ asset(produitImg ~ produit.imageProduits[0].name) }}" data-gallery="portfolioGallery" class="glightbox preview-link" title="{{ produit.name }}"><i class="fa-solid fa-plus"></i></a>
                <a href="{{ path('app_produit', {'_locale': app.request.locale, 'slug':produit.translations[app.request.locale].slug|default('produit'), 'id':produit.id}) }}" class="details-link" title="More Details"><i class="fa-solid fa-link"></i></a>
                {% if metaP().isPaiement %}
                <div class="center">
                    <a href="{{ path('app_add', {'id':produit.id}) }}" class="bouton2">Ajouter au panier</a>
                </div>
                {% endif %}
            </div>
        </div>
        {% endif %}
    {% endfor %}
    </div>
{% endif %}