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

{% block title %}Découvrez notre produit : {{ produit.name }} chez {{ metaP().raisonSociale }} à {{ metaP().villeOpti }} {% endblock %}
{% block metaTitle %}{% if produit.metaTitre %}{{ produit.metaTitre|replaceConfig|replaceProduit(produit.id) }}{% else %}{{ metaP().metaTitreProduit|replaceConfig }}{% endif %}{% endblock %}
{% block metaDescription %}{% if produit.metaDescription %}{{ produit.metaDescription|replaceConfig|replaceProduit(produit.id) }}{% else %}{{ metaP().metaDescProduit|replaceConfig }}{% endif %}{% endblock %}

{% block body %}
<article id="article">
    <!-- ======= Portfolio Details Section ======= -->
    <section id="portfolio-details" class="portfolio-details">
      <div class="container">
        <div class="center">
            <a href="{{ path('app_produits') }}" class="bouton mb-5 mt-0">Retour au produits</a>
        </div>
        <div class="row gy-4">

          <div class="col-lg-8 position-relative">
            <div data-swiper="1,1,1,1,30" class="h-100">
              <div class="portfolio-details-slider toSwiper h-100">
              {% 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 class="swiper-wrapper align-items-center">
                  {% for image in produit.imageProduits %}
                      <div class="swiper-slide noRepeat" style="background-image: url('{{ asset(produitImg ~ image.name) }}');">
                          {# <img src="{{ asset(produitImg ~ image.name) }}" alt=""> #}
                      </div>
                  {% endfor %}
                </div>
                <div class="swiper-pagination"></div>
              </div>
            </div>
          </div>

          <div class="col-lg-4">
            <div class="portfolio-info">
              <h3>{{ produit.translations[app.request.locale].name|default('') }}</h3>
              <ul>
                {% set remiseHT = (produit.prix - (produit.prix*(produit.promotion/100)))|round(2,'floor') %}
                {% set remiseTTC = (remiseHT + (remiseHT*0.2))|round(2,'floor') %}
                <li><strong>Prix HT</strong>: {{ (produit.promotion) ? '<strike>':'' }}{{ produit.prix }}{{ (produit.promotion) ? '</strike>':'' }} € {{ (produit.promotion) ? remiseHT:'' }}</li>
                <li><strong>Prix TTC</strong>: {{ (produit.promotion) ? '<strike>':'' }}{{ produit.prixTtc }}{{ (produit.promotion) ? '</strike>':'' }} € {{ (produit.promotion) ? remiseTTC:'' }}</li>
                <li><strong>Quantité</strong>: {{ produit.quantite }}</li>
                <li><strong>Marque</strong>: {{ produit.marque }}</li>
                <li><strong>Categorie</strong>: {% for cat in  produit.categorie %}{{ cat.name }},{% endfor %}</li>
              </ul>
            </div>
            <div class="portfolio-description">
              <div class="stretched-link">Description</div>
              {{ produit.translations[app.request.locale].description|default('')|raw }}
            </div>
            {% if metaP().isPaiement %}
            <div class="center">
                  <a href="{{ path('app_add', {'id':produit.id}) }}" class="bouton">Ajouter au panier</a>
            </div>
            {% endif %}
            <div class="center">
                  <a href="{{ path('app_contact') }}" class="bouton">Contact</a>
            </div>
          </div>

        </div>
      </div>
    </section><!-- End Portfolio Details Section -->
</article>
{% endblock %}