{% extends "baseFonce.html.twig" %}

{% block title "Produit | Icaupack" %}

{% block body %}
    <main class="fonce">
        <div class="traits">
            <div class="trait"></div>
            <div class="trait t2"></div>
        </div>

        <div class="produit">
            <div class="container-fluid">
                <div class="row"> 
                    <div class="col-md-1"></div>
                    <div class="col-md-10 np">
                        <div class="title">
                            <div class="carre"></div>
                            <h2>{{ product.name }}</h2>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="slideshow">
                                    {% for picture in product.picturesTop  %}
                                        <div class="slide">
                                            <div class="slide__img-wrap">
                                                <div class="slide__img" style="background-image: url({{ vich_uploader_asset(picture, 'imageFile') }}); background-position: center;"></div>
                                                <div class="slide__img-reveal"></div>
                                            </div>
                                        </div> 
                                    {% endfor %}
                                    {% for picture in product.pictures %}
                                        <div class="slide">
                                            <div class="slide__img-wrap">
                                                <div class="slide__img" style="background-image: url({{ vich_uploader_asset(picture, 'imageFile') }}); background-position: center;"></div>
                                                <div class="slide__img-reveal"></div>
                                            </div>
                                        </div>
                                    {% endfor %}
                                    <nav class="slidenav">
                                        <button class="slidenav__item slidenav__item--prev"><img src="{{ asset('images/icons/prev-produit.svg') }}" alt="Icon précédent - produit - Icaupack"></button>
                                        <button class="slidenav__item slidenav__item--next"><img src="{{ asset('images/icons/next-produit.svg') }}" alt="Icon suivant - produit - Icaupack"></button>
                                    </nav>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="new-table">
                                    <table>
                                        <thead>
                                            <tr>
                                                <td colspan="8">
                                                    <span>Caractéristiques</span>
                                                </td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                {% if product.codeArticle is not empty %}
                                                    <td>
                                                        <span>Code article</span>
                                                    </td>
                                                {% endif %}

                                                {% if product.dimensionBlister is not empty %}
                                                    <td>
                                                        <span>
                                                            Dimensions
                                                        </span>
                                                    </td>
                                                {% endif %}

                                                {% if product.nbPiece is not empty %}
                                                    <td>
                                                        <span>
                                                            Nombre de pièces par carton
                                                        </span>
                                                    </td>
                                                {% endif %}

                                                {% if product.caracteristics is not empty %}
                                                    <td>
                                                        <span>
                                                            Caractéristiques
                                                        </span>
                                                    </td>
                                                {% endif %}

                                                {% if product.volumeEmpreinteBbc is not empty %}
                                                    <td>
                                                        <span>
                                                            Volume empreinte bbc
                                                        </span>
                                                    </td>
                                                {% endif %}

                                                {% if product.nbEmpreinte is not empty %}
                                                    <td>
                                                        <span>
                                                            Nombre empreinte
                                                        </span>
                                                    </td>
                                                {% endif %}
                                                
                                                {% if product.materialColor is not empty %}
                                                    <td>
                                                        <span>
                                                            Matière
                                                        </span>
                                                    </td>
                                                {% endif %}
                                                {% if product.color is not empty %}
                                                    <td>
                                                        <span>
                                                            Couleur
                                                        </span>
                                                    </td>
                                                {% endif %}
                                            </tr>
                                            <tr>
                                            {% if product.codeArticle is not empty %}
                                                    <td>
                                                        <span>{{ product.codeArticle|nl2br }}</span>
                                                    </td>
                                                {% endif %}

                                                {% if product.dimensionBlister is not empty %}
                                                    <td>
                                                        <span>
                                                            {{ product.dimensionBlister|nl2br }}
                                                        </span>
                                                    </td>
                                                {% endif %}

                                                {% if product.nbPiece is not empty %}
                                                    <td>
                                                        <span>
                                                            {{ product.nbPiece|nl2br }}
                                                        </span>
                                                    </td>
                                                {% endif %}

                                                {% if product.caracteristics is not empty %}
                                                    <td>
                                                        {% for caracteristic in product.caracteristics %}
                                                            <span>
                                                                {{ caracteristic.name }}
                                                            </span>
                                                        {% endfor %}
                                                    </td>
                                                {% endif %}

                                                {% if product.volumeEmpreinteBbc is not empty %}
                                                    <td>
                                                        <span>
                                                            {{ product.volumeEmpreinteBbc }}
                                                        </span>
                                                    </td>
                                                {% endif %}

                                                {% if product.nbEmpreinte is not empty %}
                                                    <td>
                                                        <span>
                                                            {{ product.nbEmpreinte|nl2br }}
                                                        </span>
                                                    </td>
                                                {% endif %}
                                                
                                                {% if product.materialColor is not empty %}
                                                    <td>
                                                        <span>
                                                            {{ product.materialColor }}
                                                        </span>
                                                    </td>
                                                {% endif %}
                                                {% if product.color is not empty %}
                                                    <td>
                                                        <span>
                                                            {{ product.color }}
                                                        </span>
                                                    </td>
                                                {% endif %}
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                
                                <div class="table">
                                    <div class="header-table">
                                        <span>Caractéristiques</span>
                                    </div>
                                    <div class="content-table">
                                        <!-- Code article -->
                                        {% if product.codeArticle is not empty %}
                                            <div>
                                                <span>Code article</span>
                                            </div>
                                            <div class="caracteristique">
                                                <span>{{ product.codeArticle|nl2br }}</span>
                                            </div>
                                        {% endif %}

                                        <!-- Dimension -->
                                        {% if product.dimensionBlister is not empty %}
                                            <div class="caracteristique">
                                                <span>
                                                    Dimensions
                                                </span>
                                                {% if product.codeArticle is defined %}
                                                    <span>{{ product.codeArticle|nl2br }}</span>
                                                {% endif %}
                                            </div>
                                            <div class="caracteristique">
                                                {% if product.codeArticle is defined %}
                                                        <span class="space"></span>
                                                {% endif %}
                                                <span>{{ product.dimensionBlister|nl2br }}</span>
                                            </div>
                                        {% endif %}

                                        <!-- Nombre par carton -->
                                        {% if product.nbPiece is not empty %}
                                            <div class="caracteristique">
                                                <span>Nombre de pièces par carton</span>
                                                {% if product.codeArticle is defined %}
                                                    <span>{{ product.codeArticle|nl2br }}</span>
                                                {% endif %}
                                            </div>
                                            <div class="caracteristique">
                                                <span>
                                                    {% if product.codeArticle is defined %}
                                                        <span class="space"></span>
                                                    {% endif %}
                                                    {{ product.nbPiece|nl2br }}
                                                </span>
                                            </div>
                                        {% endif %}

                                        <!-- Caractéristiques -->
                                        {% if product.caracteristics is not empty %}
                                            <div>
                                                <span>
                                                    Caractéristiques
                                                </span>
                                            </div>
                                            <div class="caracteristique">
                                                {% for caracteristic in product.caracteristics %}
                                                    <span>
                                                        {{ caracteristic.name }}
                                                    </span>
                                                {% endfor %}
                                            </div>
                                        {% endif %}

                                        <!-- Volume empreinte bbc -->
                                        {% if product.volumeEmpreinteBbc is not empty %}
                                            <div>
                                                <span>Volume empreinte bbc</span>
                                            </div>
                                            <div>
                                                <span>{{ product.volumeEmpreinteBbc }}</span>
                                            </div>
                                        {% endif %}    

                                        <!-- Nombre d'empreintes -->
                                            {% if product.nbEmpreinte is not empty %}
                                            <div class="caracteristique">
                                                <span>Nombre empreinte</span>
                                                {% if product.codeArticle is defined %}
                                                    <span>{{ product.codeArticle|nl2br }}</span>
                                                {% endif %}
                                            </div>
                                            <div class="caracteristique">
                                                {% if product.codeArticle is defined %}
                                                    <span class="space"></span>
                                                {% endif %}
                                                <span>{{ product.nbEmpreinte|nl2br }}</span>
                                        </div>
                                        {% endif %}                         

                                        <!-- Matière -->
                                        {% if product.materialColor is not empty %}
                                            <div class="caracteristique">
                                                <span>Matière</span>
                                                {% if product.codeArticle is defined %}
                                                    <span>{{ product.codeArticle|nl2br }}</span>
                                                {% endif %}
                                            </div>
                                            <div>
                                                {% if product.codeArticle is defined %}
                                                    <span class="space"></span>
                                                {% endif %}
                                                <span>{{ product.materialColor }}</span>
                                            </div>
                                        {% endif %}

                                        <!-- Couleur -->
                                        {% if product.color is not empty %}
                                            <div class="caracteristique">
                                                <span>Couleur</span>
                                                {% if product.codeArticle is defined %}
                                                    <span>{{ product.codeArticle|nl2br }}</span>
                                                {% endif %}
                                            </div>
                                            <div>
                                                {% if product.codeArticle is defined %}
                                                    <span class="space"></span>
                                                {% endif %}
                                                <span>{{ product.color }}</span>
                                            </div>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="texte-produit">
                            <p>
                                {% if product.categories.description is defined %}
                                    {{ product.categories.description|nl2br }}
                                {% endif %}
                            </p>
                            <a href="" class="btn">Demande de devis</a>
                        </div>
                        <div class="vous-aimerez-aussi">
                            <div class="title">
                                <div class="carre"></div>
                                <h2>Ces produits peuvent aussi vous intéresser</h2>
                            </div>
                            <div class="row">
                                {% for productHighlight in product.highlights %}
                                    <div class="col-md-4 vaa-produit">
                                        <div class="title vaa-produit">
                                            <div class="carre"></div>
                                            <h3 class="" data-content="{{ productHighlight.name }}">{{ productHighlight.name }}</h3>
                                        </div>
                                        <img src="{{ asset('images/miniature-produit.jpg') }}" alt="Nom produit">
                                        <a href="{{ path('product', {slug: product.slug, id: product.id}) }}" class="btn">Découvrir le produit</a>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-1"></div>
                </div>
            </div>
        </div>
    </main>
{% endblock %}