{% extends 'base.html.twig' %}
{% block seo %}
<meta name="description" content="" />
<meta property="og:title" content="Catalogue Spécial Extérieur - 17 mars 17 avril 2021 | Gedimat Martinique " />
<meta property="og:type" content="Website" />
<meta property="og:description" content="" />
<meta property="og:url" content="{{absolute_url( app.request.uri)}}" />
<meta property="og:site_name" content="" />
<meta property="fb:app_id" content="" />
<meta property="og:image" content="{{asset('img/images/ambiance.jpg')}}" />

<meta name ="twitter:card" content = "summary_large_image" />
<meta name="twitter:site" content="">
<meta name="twitter:creator" content="">
<meta name="twitter:title" content="Catalogue Spécial Extérieur - 17 mars 17 avril 2021 | Gedimat Martinique ">
<meta name="twitter:description" content="">
<meta name="twitter:image" content="{{asset('img/images/ambiance.jpg')}}">
{% endblock %}
{% block body %}
<style media="screen">
  .card-product__description li{
    color: #867e75;
  }
</style>
    <!--
    ==================================== -->
    <main class="st-main">
        <!--
        ==================================== -->
        <section class="section--landing padding-bottom-large">

            <div class="grid margin-grid">
                <div class="col campaign-intro-container">

                    <!--  ==================================== -->
                    <div class="campaign-ambiance user-select-none">
                        <div class="title-container campaign-title user-select-none">
                            <img src="{{asset('img/images/campaign-title.png')}}" draggable="false" alt="">
                        </div>
                        <img src="{{asset('img/images/ambiance.jpg')}}" draggable="false" alt="">
                    </div>

                    <div class="campaign-rubrics">
                      {% for cat in category %}
                    {% if cat.rank == 1 %}
                        <a href="#rubric-one" class="campaign-rubric--one">
                    {% elseif cat.rank == 2%}
                        <a href="#rubric-two" class="campaign-rubric--two">
                    {% else %}
                        <a href="#rubric-three" class="campaign-rubric--three">
                    {% endif %}
                            <span class="campaign-rubric__title">
                                {{cat.name}}
                            </span>
                            <div class="campaign-rubric__title-thumb-container">
                              {% if cat.img %}
                                <img src="{{asset('img/upload/')}}{{cat.img}}" alt="" draggable="false" title="" class="campaign-rubric-image">
                              {% else %}
                                <img src="{{asset('img/images/rubric.jpg')}}" alt="" draggable="false" title="" class="campaign-rubric-image">
                              {% endif %}
                            </div>
                        </a>
                        {% endfor %}
                    </div>

                </div>
            </div>

        </section>


        <!--
        ==================================== -->
        <section class="section--favorite">
            <div class="grid margin-grid favorite-container">
                <div class="col no-padding">

                    <div class="grid">
                        <div class="col">
                            <div class="title-container align-center">
                                <i class="icon-hearth"></i>
                                <h2>
                                    NOS COUPS DE COEUR
                                </h2>
                            </div>
                        </div>
                    </div>

                    <div class="grid">
                        <div class="col grid justify-center">

                            <div class="swiper-nav-arrow-container grid-middle height-full">
                                <div class="swiper-button-prev"></div>
                            </div>
                            <div class="swiper-container swiper-favorite-container">
                                <div class="swiper-wrapper">
                                  {% for fav in favorites %}
                                    <div class="swiper-slide">
                                      <a href="{{path('product',{id:fav.id})}}" class="card-product">
                                            <div class="card-product__image-thumb-container">
                                              {% if fav.img %}
                                                <img id="img-heart-{{fav.id}}" src="{{asset('img/upload/')}}{{fav.img}}" alt="{{fav.name}}" title="{{fav.name}}" class="card-product-image">
                                              {% else %}
                                                <img src="{{asset('img/images/product-img.png')}}" alt="{{fav.name}}" title="{{fav.name}}" class="card-product-image">
                                              {% endif %}
                                            </div>
                                            <div class="card-product__description">
                                                <h3 id="title-heart-{{fav.id}}" style="color:#252525">{{fav.name|upper}}</h3>
                                                <p>
                                                {% if fav.description %}
                                                      {{fav.description|raw}}
                                                    {% endif %}
                                                </p>
                                            </div>
                                            {% if fav.price %}
                                            <div class="card-product__price">
                                              {% if fav.mention %}
                                                <span style="display:block;text-transform:uppercase">à partir de</span>
                                              {% endif %}
                                                <span id="price-heart-{{fav.id}}" class="price">
                                                    {{fav.price}}
                                                </span>
                                                <sup>
                                                  {% if fav.priceDecimal %}
                                                    <span class="price--cents">,{{fav.priceDecimal}}</span>
                                                  {% endif %}
                                                    <span class="price--device">€</span>
                                                </sup>
                                            </div>
                                            {% endif %}
                                        </a>
                                    </div>
                                    {% endfor %}
                                </div>

                            </div>
                            <div class="swiper-nav-arrow-container grid-middle height-full">
                                <div class="swiper-button-next"></div>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </section>

        <!--
        ==================================== -->
        <section class="section--comeToUs space-top-xlarge">
            <div class="grid margin-grid">
                <div class="col">

                    <div class="comeToUs-container grid">
                        <div class="col-4_sm-12_xs-12 align-center">
                            <span class="comeToUs--man">
                                <img src="{{asset('img/images/man.png')}}" draggable="false" alt="" class="comeToUs-man user-select-none">
                            </span>
                        </div>
                        <div class="col-8_sm-12_xs-12">
                            <div class="text-container">
                                <h2 class="title">
                                    <b>
                                        <span class="main-color">Nos conseillers</span>
                                        vous attendent en magasin,
                                    </b>
                                    pour vous accompagner dans votre projet !
                                </h2>
                                <ul class="comeToUs__list">
                                    <li>Conseils techniques</li>
                                    <li>Devis personnalisés et gratuits</li>
                                    <li>Facilité de paiement x4 <i class="icon-cb"></i></li>
                                    <li>Livraison rapide avec camion grue</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </section>


        <!--
        ==================================== -->
        {% if catSection1 %}
        <section class="section--rubric section--rubric-one padding-top-xlarge" id="rubric-one">

            <div class="grid margin-grid">
                <div class="col">

                    <div class="rubric__head grid justify-space-between">

                        <div class="rubric__title">
                            <h2>
                                {{catSection1.name|upper}}
                            </h2>
                        </div>

                        <nav class="rubric__nav">
                            <ul class="list-horizontal">
                                <li><a href="#rubric-two" class="anchor-link">Electroportatif</a></li>
                                <li><a href="#rubric-three" class="anchor-link">Outillage & Jardin</a></li>
                            </ul>
                        </nav>

                    </div>

                </div>
            </div>

            <div class="grid margin-grid">
                <div class="col cards-product-container">
                    {% for product in productSection1 %}
                    <a href="{{path('product',{id:product.id})}}" class="card-product">
                        <div class="card-product__image-thumb-container">
                          {% if product.img %}
                            <img id="img-cloture-product-{{product.id}}" src="{{asset('img/upload/')}}{{product.img}}" alt="{{product.name}}" title="{{product.name}}" class="card-product-image">
                          {% else %}
                            <img src="{{asset('img/images/product-img.png')}}" alt="{{product.name}}" title="{{product.name}}" class="card-product-image">
                          {% endif %}
                        </div>
                        <div class="card-product__description">
                            <h3 id="title-cloture-product-{{product.id}}" style="color:#252525">{{product.name|upper}}</h3>
                            <p>
                              {% if product.description %}
                                    {{product.description|raw}}
                                {% endif %}
                            </p>
                        </div>
                        {% if product.price %}
                        <div class="card-product__price">
                          {% if product.mention %}
                          <span style="display:block;">À partir de</span>
                          {% endif %}
                            <span id="price-cloture-product-{{product.id}}" class="price">
                                {{product.price}}
                            </span>
                            <sup>
                              {% if product.priceDecimal %}
                                <span class="price--cents">,{{product.priceDecimal}}</span>
                              {% endif %}
                                <span class="price--device">€</span>
                            </sup>
                        </div>
                        {% endif %}
                    </a>
                    {% endfor %}
                </div>
            </div>
        </section>
        {% endif %}
        {% if catSection2 %}
        <section class="section--rubric section--rubric-two padding-top-xlarge" id="rubric-two">
          <div class="grid margin-grid">
              <div class="col">
                  <div class="rubric__head grid justify-space-between">

                      <div class="rubric__title">
                          <h2>
                              {{catSection2.name|upper}}
                          </h2>
                      </div>
                  </div>

              </div>
          </div>
          <div class="grid margin-grid">
              <div class="col cards-product-container">
                  {% for product in productSection2 %}
                  <a href="{{path('product',{id:product.id})}}" class="card-product">
                      <div class="card-product__image-thumb-container">
                        {% if product.img %}
                          <img src="{{asset('img/upload/')}}{{product.img}}" alt="{{product.name}}" title="{{product.name}}" class="card-product-image">
                        {% else %}
                          <img src="{{asset('img/images/product-img.png')}}" alt="{{product.name}}" title="{{product.name}}" class="card-product-image">
                        {% endif %}
                      </div>
                      <div class="card-product__description">
                          <h3 id="title-electroportatif-product-{{product.id}}" style="color:#252525">{{product.name|upper}}</h3>
                          <p>
                            {% if product.description %}
                                  {{product.description|raw}}
                              {% endif %}
                          </p>
                      </div>
                      {% if product.price %}
                      <div class="card-product__price">
                        {% if product.mention %}
                          <span style="display:block;">À partir de</span>
                        {% endif %}
                          <span id="price-electroportatif-product-{{product.id}}" class="price">
                              {{product.price}}
                          </span>
                          <sup>
                            {% if product.priceDecimal %}
                              <span class="price--cents">,{{product.priceDecimal}}</span>
                            {% endif %}
                              <span class="price--device">€</span>
                          </sup>
                      </div>
                      {% endif %}
                  </a>
                  {% endfor %}
              </div>
          </div>
        </section>
        {% endif %}
        {% if catSection3 %}
        <section class="section--rubric section--rubric-three padding-top-xlarge" id="rubric-three">
          <div class="grid margin-grid">
              <div class="col">

                  <div class="rubric__head grid justify-space-between">

                      <div class="rubric__title">
                          <h2>
                              {{catSection3.name|upper}}
                          </h2>
                      </div>
                  </div>

              </div>
          </div>
          <div class="grid margin-grid">
              <div class="col cards-product-container">
                  {% for product in productSection3 %}
                  <a href="{{path('product',{id:product.id})}}" class="card-product">
                      <div class="card-product__image-thumb-container">
                        {% if product.img %}
                          <img src="{{asset('img/upload/')}}{{product.img}}" alt="{{product.name}}" title="{{product.name}}" class="card-product-image">
                        {% else %}
                          <img src="{{asset('img/images/product-img.png')}}" alt="{{product.name}}" title="{{product.name}}" class="card-product-image">
                        {% endif %}
                      </div>
                      <div class="card-product__description">
                          <h3 id="title-outillage-product-{{product.id}}" style="color:#252525">{{product.name|upper}}</h3>
                          <p>
                            {% if product.description %}
                                  {{product.description|raw}}
                              {% endif %}
                          </p>
                      </div>
                      {% if product.price %}
                      <div class="card-product__price">
                        {% if product.mention %}
                          <span style="display:block;">À partir de</span>
                        {% endif %}
                          <span id="price-outillage-product-{{product.id}}" class="price">
                              {{product.price}}
                          </span>
                          <sup>
                            {% if product.priceDecimal %}
                              <span class="price--cents">,{{product.priceDecimal}}</span>
                            {% endif %}
                              <span class="price--device">€</span>
                          </sup>
                      </div>
                      {% endif %}
                  </a>
                  {% endfor %}
              </div>
          </div>
        </section>
        {% endif %}
    </main>
    {% endblock %}
    {% block javascripts %}
    <script>

        const swiper = new Swiper('.swiper-favorite-container', {
            autoplay: true,
            speed: 750,
            disableOnInteraction: false,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            // Responsive breakpoints
            breakpoints: {
                // when window width is >= 320px
                320: {
                slidesPerView: 1,
                spaceBetween: 20
                },
                // when window width is >= 640px
                640: {
                slidesPerView: 2,
                spaceBetween: 0
                },
                1080: {
                    slidesPerView: 3,
                    spaceBetween: 0,
                }
            }
        });

    </script>
    {% endblock %}