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

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

{% block body %}
    <a href="{{ path('category.show', {slug: product.category.slug, id: product.category.id}) }}" class="btn-retour"><img src="{{ asset('images/picto/img-btn-retour.png') }}">Retour</a>

    <div class="produit-detail">
        <div class="rectangle-fond"></div>
        <div class="container">
            <div class="row justify-content-between">
                <div class="col-md-5">
                    <img src="{{ asset('images/picto/picto-'~product.category.name|lower|replace({" ": "-", "/": "", "é":"e"})~'.png') }}" class="picto" alt="Pictogramme dallages">
                    <h1>{{ product.name }}</h1>
                    <div class="technique">
                        {% if product.category.name == 'Autour du gravier' %}
                            <span class="finition"></span>
                        {% else %}
                            <span class="finition">FINITION : {{ product.finition.name }}</span>
                        {% endif %}

                        {% if product.category.name == 'Dallages' or product.category.name == 'Pavés' or product.category.name == 'Parements' %}
                            <div class="tableau">
                                <div class="title-tab">
                                    <span class="title">Produit</span>
                                    <span class="title">Format</span>
                                    <span class="title">Ép.</span>
                                </div>
                                <div class="info-tab">
                                    {% for modele in product.modeles %}
                                        <span class="title">{{ modele.name }}</span>
                                        <span>{{ modele.format }}</span>
                                        <span>{{ modele.epaisseur }}</span>
                                    {% endfor %}
                                </div>
                                <span class="title">Autre formats, épaisseurs et finitions disponible sur demande</span>
                            </div>
                        {% elseif product.category.name == 'Margelles' %}
                            <div class="tableau margelles">
                                <div class="title-tab">
                                    <span class="title">Produit</span>
                                    <span class="title">Format</span>
                                    <span class="title">Ép.</span>
                                    <span class="title">Bords</span>
                                </div>
                                <div class="info-tab">
                                    {% for modele in product.modeles %}
                                        <span class="title">{{ modele.name }}</span>
                                        <span>{{ modele.format }}</span>
                                        <span>{{ modele.epaisseur }}</span>
                                        <span>{{ modele.bords }}</span>
                                    {% endfor %}
                                </div>
                                <span class="title">Autre formats, épaisseurs et finitions disponible sur demande</span>
                                <a href="{{ path('contact') }}" class="btn-contact">CONTACTEZ NOUS</a>
                            </div>
                        {% else %}
                        {% endif %}
                    </div>

                    <p>
                        {{ product.description }}
                    </p>

                    <a href="{{ path('devis') }}" class="btn-devis">DEMANDE DE DEVIS</a>
                </div>
                <div class="col-md-6">
                    <div class="carousel-produit">
                        <div class="fadeOut fadeIn owl-carousel owl-theme">
                            {% for picture in product.pictures %}
                                <div class="item">
                                    <div class="image">
                                        <img src="{{ vich_uploader_asset(picture, 'imageFile') | imagine_filter('thumb') }}" class="ardesia-nera animation-delay-2-dur-2 fadeScale" alt="{{ product.name }}">
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                        <div class="nav-owl">
                            <div class="prev">
                                <img src='{{ asset('images/picto/back.png') }}' alt=''>
                            </div>
                            <div class="next">
                                <img src='{{ asset('images/picto/next.png') }}' alt=''>
                            </div>
                        </div>
                        <div class="overlay-image animation slide-out2"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}