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

{% block title 'RO\'MA Nature | Produits' %}

{% block body %}
    <a href="{{ path('category.index') }}" class="btn-retour"><img src="{{ asset('images/picto/img-btn-retour.png') }}">Retour</a>
    <div class="produits">
        <div class="container">
            <img src="{{ asset('images/picto/picto-'~category.name|lower|replace({" ": "-", "/": "", "é":"e"})~'.png') }}" class="picto-gamme" alt="Pictogramme dallages">
            <div class="title">
                <h1>{{ category.name }}</h1>
            </div>
            <div class="liste-produits">
                <div class="row justify-content-between">
                    {% for product in products %}
                        {% if category.name == 'Dallages' or category.name == 'Margelles / Marches / Couvertines' or category.name == 'Pavés' or category.name == 'Parements' or category.name == 'Autour du gravier' %}
                            <div class="col-md-5 produit">
                                <a href="{{ path('product.show', {slug: product.slug, id: product.id}) }}">
                                    <div class="fadeOut fadeIn owl-carousel owl-theme">
                                        {% for picture in product.pictures %}
                                            <div class="content-produit">
                                                <div class="coin-produit cp-1">
                                                    <img src="{{ asset('images/icons/coin-produit.png') }}" alt="Coin marron">
                                                </div>
                                                <div class="item">
                                                    <img src="{{ vich_uploader_asset(picture, 'imageFile') | imagine_filter('thumb') }}" alt="{{ product.name }}">
                                                </div>
                                                <div class="coin-produit cp-2">
                                                    <img src="{{ asset('images/icons/coin-produit.png') }}" alt="Coin marron">
                                                </div>
                                            </div>
                                        {% endfor %}
                                    </div>
                                    <h3>{{ product.name }}</h3>
                                </a>
                            </div>
                        {% elseif category.name == 'Graviers' %}
                            <div class="col-md-3 produit">
                                <div class="detail-produit">
                                    <div class="fadeOut fadeIn owl-carousel owl-theme">
                                        {% for picture in product.pictures %}
                                            <div class="content-produit">
                                                <div class="coin-produit cp-1">
                                                    <img src="{{ asset('images/icons/coin-produit.png') }}" alt="Coin marron">
                                                </div>
                                                <div class="item">
                                                    <img src="{{ vich_uploader_asset(picture, 'imageFile') | imagine_filter('thumb') }}" alt="{{ product.name }}">
                                                </div>
                                                <div class="coin-produit cp-2">
                                                    <img src="{{ asset('images/icons/coin-produit.png') }}" alt="Coin marron">
                                                </div>
                                                <div class="name-product">
                                                    <h3>{{ product.name }}</h3>
                                                </div>
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        {% else %}
                            <div class="col-md-5 produit">
                                <div class="fadeOut fadeIn owl-carousel owl-theme">
                                    {% for picture in product.pictures %}
                                        <div class="content-produit">
                                            <div class="coin-produit cp-1">
                                                <img src="{{ asset('images/icons/coin-produit.png') }}" alt="Coin marron">
                                            </div>
                                            <div class="item">
                                                <img src="{{ vich_uploader_asset(picture, 'imageFile') | imagine_filter('thumb') }}" alt="{{ product.name }}">
                                            </div>
                                            <div class="coin-produit cp-2">
                                                <img src="{{ asset('images/icons/coin-produit.png') }}" alt="Coin marron">
                                            </div>
                                            <div class="name-product">
                                                <h3>{{ product.name }}</h3>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                                <div class="technique">
                                    <span class="finition">FINITION : {{ product.finition.name }}</span>
                                    {% if category.name == 'Margelles / Marches / Couvertines' %}
                                        {{ include('product/_tableauMargelles.html.twig') }}
                                    {% elseif category.name == 'Feuilles de pierre' %}
                                        {{ include('product/_tableauFeuillesPierre.html.twig') }}
                                    {% elseif category.name == 'Ardoises' %}
                                        {{ include('product/_tableauArdoises.html.twig') }}
                                    {% elseif category.name == 'Vasques / Éviers / Receveurs' %}
                                        {{ include('product/_tableauVasques.html.twig') }}
                                    {% elseif category.name == 'Fontaines' %}
                                        {{ include('product/_tableauFontaines.html.twig') }}
                                    {% else %}
                                        {{ include('product/_tableauSd.html.twig') }}
                                    {% endif %}
                                </div>
                            </div>
                        {% endif %}
                        {% if loop.index is divisible by(4) and not loop.last %}
                            <div class="photo-separe {{ loop.index }}">
                                <div class="photo"></div>
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
                <div class="navigation">
                    {{ knp_pagination_render(products) }}
                </div>
            </div>
        </div>
    </div>

{% endblock %}