{% 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="return" onclick="window.history.back();">
                            <img src="{{ asset('images/icons/arrow.svg') }}" alt="Pictogramme flêche">
                            <span>Retour à la recherche</span>
                        </div>
                        <div class="title">
                            <div class="carre"></div>
                            <h2>{{ product.name }}</h2>
                        </div>
                        <div class="row">
                            <div class="col-md-8">
                                <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-4">
                                <div class="doc">
                                    {% if product.fiche is not empty and product.fiche is defined %}
                                        {% for fiche in product.fiche %}
                                            <a href="{{ vich_uploader_asset(fiche, 'ficheFile') }}" download>
                                                <img src="{{ asset('images/icons/file.svg') }}" alt="Pictogrammme documentation">
                                                Télécharger la documentation
                                            </a>
                                        {% endfor %}
                                    {% endif %}
                                </div>
                                <div class="doc dessin">
                                    {% if product.documentation is not empty and product.documentation is defined %}
                                        {% for doc in product.documentation %}
                                            <a href="{{ vich_uploader_asset(doc, 'documentationFile') }}" download>
                                                <img src="{{ asset('images/icons/dessin-technique.svg') }}" alt="Pictogrammme dessin technique">
                                                Télécharger le dessin technique
                                            </a>
                                        {% endfor %}
                                    {% endif %}
                                </div>
                                <div class="price">
                                    {% if product.gamme.id != 2 %}
                                        <h3><span>À partir de</span> {{ product.price }} € <span>HT*</span></h3>
                                        <span class="asterix">*{{ product.infoPrice }} 
                                            Les informations relatives aux produits ainsi que les prix et tarifs figurants dans 
                                            le cadre du site, sont fournis à titre indicatif et uniquement conseillés. Ils peuvent 
                                            être modifiés à tout moment et sans préavis par la société Icaupack
                                            Photos non contractuelles.
                                        </span> 
                                    {% endif %}
                                    
                                </div>
                                <a href="{{ path('contact') }}" class="btn">Demande de devis</a>

                                <div class="desc">
                                    <a href="#new-table">
                                        Voir la description
                                        <img src="{{ asset('images/icons/arrow-desc.svg') }}" alt="Pictogrammme fêche">
                                    </a>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="new-table" id="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.description is not empty %}
                                                    <td>
                                                        <span>Description</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.description is not empty %}
                                                    <td>
                                                        <span>{{ product.description|nl2br }}</span>
                                                    </td>
                                                {% endif %}

                                                {% if product.dimensionBlister is not empty %}
                                                    <td class="dimension">
                                                        <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 class="caracteristics">
                                                        {% 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|nl2br }}
                                                        </span>
                                                    </td>
                                                {% endif %}
                                                {% if product.color is not empty %}
                                                    <td>
                                                        <span>
                                                            {{ product.color|nl2br }}
                                                        </span>
                                                    </td>
                                                {% endif %}
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                {% if product.specialFabrication == true %}
                                    <span class="mt-3">* sur fabrication spéciale.</span>
                                {% endif %}
                            </div>
                        </div>
                        <div class="texte-produit">
                            <p>
                                {% if product.categories.description is defined %}
                                    {{ product.categories.description|nl2br }}
                                {% endif %}
                            </p>
                            <a href="{{ path('contact') }}" 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>
                                        <div class="image">
                                            {% for picture in productHighlight.picturesTop  %}
                                                <img src="{{ vich_uploader_asset(picture, 'imageFile') }}" alt="Nom produit">
                                            {% endfor %}
                                        </div>
                                        <a href="{{ path('product', {slug: productHighlight.slug, id: productHighlight.id}) }}" class="btn">Découvrir le produit</a>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-1"></div>
                </div>
            </div>
        </div>
    </main>
{% endblock %}