templates/front/product.html.twig line 1

Open in your IDE?
  1. {% extends "base.html.twig" %}
  2. {% set category = subCategory.category %}
  3. {% set h1 = product.h1 %}
  4. {% block metaTags %}
  5.     <meta name="description" content="{{ product.metaDescription }}">
  6.     <title>{{ product.metaTitle }}</title>
  7.     <meta property="og:title" content="{{ product.metaTitle }}">
  8.     <meta property="og:description" content="{{ product.metaDescription }}">
  9.     <meta property="og:image"
  10.           content="{{ product.productFileName ? absolute_url(asset(vich_uploader_asset(product, 'productFile')))|imagine_filter('large') : absolute_url(asset(vich_uploader_asset(subCategory.category, 'categoryFile')))|imagine_filter('large') }}">
  11. {% endblock %}
  12. {% block body %}
  14.     <section class="position-relative bgp-center bgs-cover header-presentation first-section"
  15.              style="background-image:linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)),url({{ product.productFileName ? asset(vich_uploader_asset(product, 'productFile'))|imagine_filter('large') : asset(vich_uploader_asset(subCategory.category, 'categoryFile'))|imagine_filter('large') }})">
  16.         <img src="{{ asset('assets/img/points_blue.svg') }}" class="position-absolute t-120 l-0 zi-0"
  17.              alt="points icon"/>
  18.         <div class="container position-relative mihe-480-sm mihe-500  d-flex  align-items-center w-100">
  19.             <img src="{{ asset('assets/img/points_blue.svg') }}" class="position-absolute b-45 r--20 zi-9"
  20.                  alt="points icon"/>
  21.             <div class="position-absolute t-20 l-20 zi-99">
  22.                 {#                {% include "front/menu.html.twig" with {'menu':{("menu.presentation"|trans):path("front_presentation")} %} #}
  23.                 {% include "front/menu.html.twig" with {'menu':{
  24.                     (category.title):path("front_products", {'catSlug':category.slug}),
  25.                     (subCategory.title):path("front_sub_category", { "slug":subCategory.slug}),
  26.                     (product.title):"#",
  27.                 }, "whiteMenu":true, "isBold":true} %}
  28.             </div>
  29.             <div class="position-relative zi-9 w-100 pay-50">
  30.                 <div class="row align-items-center justify-content-center">
  31.                     <div class="col-lg-8 col-md-7 col-sm-6 position-relative t-0-sm t-80">
  32.                         <h2 data-aos="fade-down" data-aos-duration="800"
  33.                             class="text-center text-sm-left c-white fs-70 fw-600 mab-35-sm mab-15 position-relative">
  34.                             {{ product.title }}
  35.                         </h2>
  36.                         <div class="d-flex cg-5 flex-wrap justify-content-center-sm">
  37.                             <div data-aos="fade-in" data-aos-duration="800"
  38.                                  class="pax-10 may-5 pay-5 br-8 mar-15 ls-custom4 text-uppercase d-table fs-11 c-white fw-600 bs-solid bw-1  {{ product.isHardware ? "bgc-648EFB bc-648EFB" : "bgc-22E0BD bc-22E0BD" }}">
  39.                                 {{ product.isHardware ? "hardware.title"|trans : "software.title"|trans }}
  40.                             </div>
  41.                             <div class="d-flex flex-wrap justify-content-center-sm">
  42.                                 {% for key, productSubCategory in product.productSubCategories %}
  43.                                     <a data-aos="fade-in" data-aos-duration="800"
  44.                                        data-aos-delay="{{ (loop.index)*200 }}"
  45.                                        class="may-5 pax-10 pay-5 mar-15 br-8 ls-custom4 text-uppercase d-table fs-11 c-white fw-600 bs-solid bw-1"
  46.                                        href="{{ path('front_products', {'subCatSlug':productSubCategory.subCategory.slug, "catSlug":productSubCategory.subCategory.category.slug}) }}">
  47.                                         {{ productSubCategory.subCategory.title }}
  48.                                     </a>
  49.                                 {% endfor %}
  50.                             </div>
  51.                         </div>
  52.                     </div>
  53.                     <div class="col-lg-4 col-md-5 col-sm-6 col-8 col-10-custom" data-aos="fade-left"
  54.                          data-aos-duration="800"
  55.                          data-aos-delay="600">
  56.                         <div class="br-20 t-90-lg t-120 overflow-hidden bgc-EEF2F5 position-relative pay-50-md pay-30 he-380-lg he-300 d-flex align-items-center justify-content-center pax-30-md pax-20 text-center">
  57.                             <div class="d-flex position-absolute l-15 t-15 zi-99">
  58.                                 {% for key, phaseEvolution in getProductPhaseEvolutions(product) %}
  59.                                     {% set phaseEvolutionFile = getPhaseEvolutionFile(phaseEvolution, product) %}
  60.                                     {% if phaseEvolutionFile %}
  61.                                         <div class="mar-3 position-relative">
  62.                                             <img src="{{ asset('assets/img/hexagone-big.svg') }}" alt="hexagone"
  63.                                                  class="he-50  {{ category.position == "1" ? "hexagone-green" : (category.position == "2" ? "hexagone-lightBlue") }}"/>
  64.                                             <img src="{{ phaseEvolutionFile }}"
  65.                                                  alt="{{ phaseEvolution.title }}"
  66.                                                  class="img-white mawi-27 position-absolute t-0 b-0  h-auto l-0 r-0 m-auto img-white"/>
  67.                                         </div>
  68.                                     {% endif %}
  69.                                 {% endfor %}
  70.                             </div>
  71.                             <img src="{{ asset('assets/img/bg_support.png') }}" alt="bg_support"
  72.                                  class="overlay  position-absolute t-0 h-100 w-100 l-0"/>
  73.                             <img src="{{ asset(vich_uploader_asset(product, 'product1File'))|imagine_filter('medium') }}"
  74.                                  alt="{{ product.title }}" class="position-relative zi-9 mahep-100 multiply"/>
  75.                             {#   <img src="{{ asset(vich_uploader_asset(presentationParagraph, 'presentationParagraphFile'))|imagine_filter('medium') }}"
  76.                                     alt="View Point" class="br-20 "/> #}
  77.                         </div>
  78.                     </div>
  79.                 </div>
  80.             </div>
  81.         </div>
  82.     </section>
  83.     <div class="menu-sticky d-table">
  84.         <ul class="0">
  85.             {% set productBlocs = {("product.sticky.about"|trans):"#presentation"} %}
  87.             {% set productKeyFeatures = getProductKeyFeatures(product) %}
  88.             {% set productBlocs = (productKeyFeatures ? productBlocs|merge({("product.sticky.features"|trans):"#features"}) : productBlocs) %}
  90.             {% set productHardwareProductAddons = getProductHardwareProductAddons(product) %}
  91.             {% set productBlocs = (productHardwareProductAddons ? productBlocs|merge({("product.sticky.hardware"|trans):"#hardware"}) : productBlocs) %}
  93.             {% set productSoftwareProductAddons = getProductSoftwareProductAddons(product) %}
  94.             {% set productBlocs = (productSoftwareProductAddons ? productBlocs|merge({("product.sticky.software"|trans):"#software"}) : productBlocs) %}
  96.             {% set productProductBrochures = getProductProductBrochures(product) %}
  97.             {% set productBlocs = (productProductBrochures ? productBlocs|merge({("product.sticky.brochure"|trans):"#brochure"}) : productBlocs) %}
  99.             {% set productPublications = getProductPublications(product) %}
  100.             {% set productBlocs = (productPublications ? productBlocs|merge({("product.sticky.publications"|trans):"#publications"}) : productBlocs) %}
  102.             {% set productProductMedias = getProductProductMedias(product) %}
  103.             {% set productBlocs = (productProductMedias ? productBlocs|merge({("product.sticky.medias"|trans):"#medias"}) : productBlocs) %}
  105.             {% set productProducts = getProductProducts(product) %}
  106.             {% set productBlocs = (productProducts ? productBlocs|merge({("product.sticky.solutions"|trans):"#solutions"}) : productBlocs) %}
  108.             {% for key, linkNav in productBlocs %}
  109.                 <li role="button" data-href="{{ linkNav }}" class=" c-9DC771-h pointer c-888888  fw-600 fs-12 mab-10">
  110.                     <a class="  c-inherit  nav-sticky pointer"
  111.                        href="{{ linkNav }}">
  112.                         {{ key }}
  113.                     </a>
  114.                 </li>
  115.             {% endfor %}
  116.         </ul>
  117.     </div>
  118.     <div class="main main-div text-center text-md-left">
  119.         <section id="presentation">
  120.             <div class="pat-110 pab-50  pax-20 pax-0-md section-grey position-relative overflow-hidden">
  121.                 <img src="{{ asset('assets/img/Motif.png') }}" alt="background motif"
  122.                      class="uexpmv w-100 b-0 l-0 img-fit position-absolute"/>
  123.                 <div class="mawi-810 mx-auto position-relative zi-9" data-aos="fade-up" data-aos-duration="800">
  124.                     {% include "front/productIntro.html.twig" with {'title':product.introTitle, "description":product.description} %}
  125.                 </div>
  126.             </div>
  127.             <div class="container">
  128.                 {% include "front/productParagraph.html.twig" with {'productParagraphs':getProductParagraphs(product)} %}
  129.             </div>
  130.         </section>
  131.         {% if productKeyFeatures %}
  132.             <section id="features" class="pay-100-md pay-60 background-blue2 position-relative overflow-hidden">
  133.                 <img src="{{ asset('assets/img/motif1.png') }}" alt="motif1"
  134.                      class="position-absolute t-0 r-0 w-100 l-0"/>
  135.                 <div class="mawi-440 mx-auto position-relative zi-9" data-aos="fade-in" data-aos-duration="800">
  136.                     <div class="surtitle text-center c-204A9A fs-16 mab-25 fw-600 text-uppercase ls-custom3">
  137.                         {{ "product.features.surTitle"|trans|raw }}
  138.                     </div>
  139.                     <h3 class="text-center d-table mx-auto c-333333 fs-38 fw-700 mat-0 mab-35 position-relative">
  140.                         <img src="{{ asset('assets/img/points.svg') }}" class="position-absolute   t--20 l--20 zi-0"
  141.                              alt="points icon"/>
  142.                         {{ "product.features.title"|trans|raw }}</h3>
  143.                 </div>
  144.                 <div class="position-relative zi-9 mx-auto mawi-810 productKeyFeature">
  145.                     {% for key, productKeyFeature in productKeyFeatures %}
  146.                         <div data-aos="fade-up" data-aos-duration="800">
  148.                             <a role="button"
  149.                                class='d-flex align-items-center justify-content-between pointer  togglePublications pay-30 '>
  150.                                 <h3 class='c-204A9A text-left pax-15 fs-22 my-0 fw-600 col '>
  151.                                     {{ productKeyFeature.title }}
  152.                                 </h3>
  153.                                 <div class="col-auto">
  154.                                     <i class="fa-light fs-33 fa-circle-plus c-9DC771"></i>
  155.                                 </div>
  156.                             </a>
  157.                             <div class="content-publications text-left  pax-15 fs-15 fw-500 c-8E9094">
  158.                                 <div class="mab-50">
  159.                                     {{ productKeyFeature.content|raw }}
  160.                                 </div>
  161.                             </div>
  162.                             <hr class='btw-2 bc-CFDEE4 may-0'/>
  163.                         </div>
  164.                     {% endfor %}
  165.                 </div>
  166.             </section>
  167.         {% endif %}
  168.         {% if productHardwareProductAddons %}
  169.             <section id="hardware" class=" section-grey position-relative overflow-hidden pay-110">
  170.                 <img src="{{ asset('assets/img/Motif.png') }}" alt="background motif"
  171.                      class="uexpmv w-100 b-0 l-0 img-fit position-absolute"/>
  172.                 <div class="position-relative zi-9 " data-aos="fade-up" data-aos-duration="800">
  173.                     <div class="surtitle pax-15 text-center c-204A9A mab-20 fs-16 fw-600 text-uppercase ls-custom2">
  174.                         {{ "product.hardwareAddon.surTitle"|trans }}
  175.                     </div>
  176.                     <h3 class="text-center pax-15 d-table mawi-440 mx-auto c-333333 fs-38 fw-700 mat-0 mab-35 position-relative">
  177.                         <img src="{{ asset('assets/img/points.svg') }}"
  178.                              class="position-absolute grayscale2  t--20 l--20 zi-0" alt="points icon"/>
  179.                         {{ product.hardwareAddonTitle }}</h3>
  180.                     <div class="container  ">
  181.                         {% include "front/productAddons.html.twig" with {'class':'hardwareAddonSlider','productProductAddons':productHardwareProductAddons} %}
  182.                     </div>
  183.                 </div>
  184.             </section>
  185.         {% endif %}
  186.         {% if productSoftwareProductAddons %}
  187.             <section id="software" class=" section-grey position-relative overflow-hidden pay-110">
  188.                 <img src="{{ asset('assets/img/Motif.png') }}" alt="background motif"
  189.                      class="uexpmv w-100 b-0 l-0 img-fit position-absolute"/>
  190.                 <div class="position-relative zi-9" data-aos="fade-up" data-aos-duration="800">
  191.                     <div class="surtitle pax-15 text-center c-204A9A mab-20 fs-16 fw-600 text-uppercase ls-custom2">
  192.                         {{ "product.softwareAddon.surTitle"|trans }}
  193.                     </div>
  194.                     <h3 class="text-center pax-15 d-table mawi-440 mx-auto c-333333 fs-38 fw-700 mat-0 mab-35 position-relative">
  195.                         <img src="{{ asset('assets/img/points.svg') }}"
  196.                              class="position-absolute grayscale2  t--20 l--20 zi-0" alt="points icon"/>
  197.                         {{ product.softwareAddonTitle }}</h3>
  198.                     <div class="container ">
  199.                         {% include "front/productAddons.html.twig" with {'class':'softwareAddonSlider','productProductAddons':productSoftwareProductAddons} %}
  200.                     </div>
  201.                 </div>
  202.             </section>
  203.         {% endif %}
  204.         {% if productProductBrochures %}
  205.             <section id="brochure" class="pay-100 background-blue2 position-relative overflow-hidden">
  206.                 <img src="{{ asset('assets/img/motif1.png') }}" alt="motif1"
  207.                      class="position-absolute t-0 r-0 w-100 l-0"/>
  208.                 <div class="mawi-440 mx-auto position-relative zi-9" data-aos="fade-in" data-aos-duration="800">
  209.                     <div class="surtitle text-center c-204A9A fs-16 mab-25 fw-600 text-uppercase ls-custom3">
  210.                         {{ "product.brochure.surTitle"|trans|raw }}
  211.                     </div>
  212.                     <h3 class="text-center d-table mx-auto c-333333 fs-38 fw-700 mat-0 mab-35 position-relative">
  213.                         <img src="{{ asset('assets/img/points.svg') }}" class="position-absolute   t--20 l--20 zi-0"
  214.                              alt="points icon"/>
  215.                         {{ "product.brochure.title"|trans|raw }}</h3>
  216.                 </div>
  217.                 <div class="position-relative zi-9 mx-auto mawi-810 productKeyFeature">
  218.                     {% for key, productProductBrochure in productProductBrochures %}
  219.                         {% set productBrochure = productProductBrochure.productBrochure %}
  220.                         {% set productBrochurePdf = getProductBrochurePdf(productBrochure) %}
  221.                         <div data-aos="fade-up" data-aos-duration="800">
  223.                             <a role="button"
  224.                                class='d-flex align-items-center justify-content-between pointer togglePublications pay-30 '>
  225.                                 <h4 class='c-204A9A pax-15 text-left fs-22 my-0 fw-600 col'>
  226.                                     {{ productBrochure.title }}
  227.                                 </h4>
  228.                                 <div class="col-auto">
  229.                                     <i class="fa-light fs-33 fa-circle-plus c-9DC771"></i>
  230.                                 </div>
  231.                             </a>
  232.                             <div class="content-publications text-left  pax-15 fs-15 fw-500 c-8E9094">
  233.                                 <div class="mab-50">
  234.                                     {{ productBrochure.description|raw }}
  235.                                     {% if productBrochurePdf %}
  236.                                         <div class="mat-15">
  237.                                             <a class="c-9DC771 tdl-underline"
  238.                                                href="{{ asset(vich_uploader_asset(productBrochurePdf, 'productBrochurePdfFile')) }}"
  239.                                                download="{{ productBrochure.title }}">
  240.                                                 <i class="fa-solid fa-file-pdf mar-15"></i>{{ "product.brochure.download"|trans|raw }}
  241.                                             </a>
  242.                                         </div>
  243.                                     {% endif %}
  244.                                 </div>
  245.                             </div>
  246.                             <hr class='btw-2 bc-CFDEE4 may-0'/>
  247.                         </div>
  248.                     {% endfor %}
  249.                 </div>
  250.             </section>
  251.         {% endif %}
  252.         {% if productPublications %}
  253.             <section id="publications" class=" section-grey position-relative overflow-hidden pay-110">
  254.                 <img src="{{ asset('assets/img/Motif.png') }}" alt="background motif"
  255.                      class="uexpmv w-100 b-0 l-0 img-fit position-absolute"/>
  256.                 <div class="position-relative zi-9 container" data-aos="fade-up" data-aos-duration="800">
  257.                     <div class="surtitle text-center c-204A9A mab-20 fs-16 fw-600 text-uppercase ls-custom2">
  258.                         {{ "product.publications.surTitle"|trans }}
  259.                     </div>
  260.                     <h3 class="text-center d-table mawi-440 mx-auto c-333333 fs-38 fw-700 mat-0 mab-35 position-relative">
  261.                         <img src="{{ asset('assets/img/points.svg') }}"
  262.                              class="position-absolute grayscale2  t--20 l--20 zi-0" alt="points icon"/>
  263.                         {{ "product.publications.title"|trans|raw }}</h3>
  264.                     <div class="position-relative">
  265.                         {% if productPublications|length > 3 %}
  266.                             <div class="pointer prev-pub-slid position-absolute l--30-sm l-0 zi-99 t-0 b-0 d-flex align-items-center justify-content-center">
  267.                                 <img src="{{ asset('assets/img/next-arrow.svg') }}" alt="prev arrow" class="rot-180"/>
  268.                             </div>
  269.                             <div class="pointer next-pub-slid  position-absolute r--30-sm r-0 zi-99 t-0 b-0 d-flex align-items-center justify-content-center ">
  270.                                 <img src="{{ asset('assets/img/next-arrow.svg') }}" alt="next arrow"/>
  271.                             </div>
  272.                         {% endif %}
  273.                         <div class="slick-publications-product">
  274.                             {% include "front/publicationsList.html.twig" with {'productPage':1,"publications":productPublications} %}
  275.                         </div>
  276.                     </div>
  277.                     <div class="text-center">
  278.                         <a href="{{ path('front_publications', {'slug':category.slug}) }}" class="mat-70 btn btn1">
  279.                             {{ "product.publications.btn"|trans|raw }} {{ category.title }}
  280.                         </a>
  281.                     </div>
  283.                 </div>
  284.             </section>
  285.         {% endif %}
  286.         <section id="medias"
  287.                  class="pay-100-lg pay-80-md pay-60-sm pay-50 background-blue2 position-relative overflow-hidden">
  288.             <img src="{{ asset('assets/img/motif1.png') }}" alt="motif1"
  289.                  class="position-absolute t-0 r-0 w-100 l-0"/>
  290.             <div class="container position-relative zi-9">
  291.                 <div data-aos="fade-up" data-aos-duration="800"
  292.                      class="surtitle text-center c-204A9A mab-20 fs-16 fw-600 text-uppercase ls-custom2">
  293.                     {{ "product.informations.surTitle"|trans }}
  294.                 </div>
  295.                 <h3 data-aos="fade-up" data-aos-duration="800"
  296.                     class="text-center d-table mx-auto c-333333 fs-38 fw-700 mat-0 mab-35 position-relative">
  297.                     <img src="{{ asset('assets/img/points.svg') }}" class="position-absolute   t--20 l--20 zi-0"
  298.                          alt="points icon"/>
  299.                     {{ "product.informations.title"|trans|raw }}</h3>
  300.                 <p data-aos="fade-up" data-aos-duration="800"
  301.                    class="mawi-740 mx-auto text-center c-8C8C8C fw-500 fs-14 mab-35">
  302.                     {{ "product.informations.intro"|trans|raw }}
  303.                 </p>
  304.                 <div class="d-flex align-items-center justify-content-center">
  305.                     <div data-aos="fade-right" data-aos-duration="800" class="max-6">
  306.                         <a class="btn btn1 br-8"
  307.                            href="{{ path('front_contact', {'slug':product.slug}) }}/#contactFormContainer">{{ "product.informations.contact.btn"|trans|raw }}</a>
  308.                     </div>
  309.                     {% if product.displayDemoBtn %}
  310.                         <div data-aos="fade-left" data-aos-duration="800" class="max-6">
  311.                             <a class="btn btn-white2 br-8"
  312.                                href="{{ path('front_contact', {'slug':product.slug, "isDemo":1}) }}#contactFormContainer">{{ "product.informations.demo.btn"|trans|raw }}
  313.                                 <i class="fa-solid fa-caret-right mal-10"></i></a>
  314.                         </div>
  315.                     {% endif %}
  317.                 </div>
  318.                 {% if productProductMedias %}
  319.                     <div class="position-relative overflow-hidden br-8  mat-100-md mat-70"
  320.                          data-aos="fade-up"
  321.                          data-aos-duration="800">
  322.                         {#  <div class="pointer prev-media-slid bgc-F9FAFE position-absolute he-37 br-50 d-flex align-items-center justify-content-center zi-99 wi-37 l-30 t-0 b-0 my-auto">
  323.                           <i class="fa-light fa-arrow-left c-204A9A"></i>
  324.                       </div>
  325.                       <div class="pointer next-media-slid bgc-F9FAFE  position-absolute he-37 wi-37 br-50 d-flex align-items-center justify-content-center  zi-99 r-30 t-0 b-0 my-auto">
  326.                           <i class="fa-light fa-arrow-right c-204A9A"></i>
  327.                       </div> #}
  328.                         <div class="slick-medias2 position-relative zi-9">
  329.                             {% for key, productProductMedia in productProductMedias %}
  330.                                 {% set productMedia = productProductMedia.productMedia %}
  331.                                 {% if productMedia.youtube %}
  332.                                     <div class="position-relative">
  333.                                         <div class="bgc-media"></div>
  334.                                         <div class="position-absolute text-center fw-600 t-0 b-0 d-flex align-items-center justify-content-center r-0 l-0 w-100 h-100 m-auto">
  335.                                             <div>
  336.                                                 <div class="surtitle c-white ls-custom2 fs-16 text-uppercase ">
  337.                                                     {{ "product.productMedia.surTitle"|trans|raw }}
  338.                                                 </div>
  339.                                                 <div class="mawi-500 mx-auto c-white lh2-13 may-30 fs-38 fw-700">
  340.                                                     {{ productMedia.title }}
  341.                                                 </div>
  343.                                                 <div type="button" data-toggle="modal"
  344.                                                      data-target="#mediaModal{{ loop.index }}"
  345.                                                      class=" he-70 d-flex m-auto align-items-center justify-content-center bgc-9DC771 wi-70 br-50">
  346.                                                     <i class="fa-solid fa-play c-white fs-17"></i>
  347.                                                 </div>
  348.                                             </div>
  349.                                         </div>
  350.                                         <img src="{{ asset(vich_uploader_asset(productMedia, 'productMediaFile'))|imagine_filter('large') }}"
  351.                                              alt="{{ productMedia.title }}" class="br-8 he-650 img-fit w-100"/>
  352.                                     </div>
  353.                                 {% else %}
  354.                                     <div class="position-relative">
  355.                                         <div class="bgc-media h-100 w-100"></div>
  356.                                         <img src="{{ asset(vich_uploader_asset(productMedia, 'productMediaFile'))|imagine_filter('large') }}"
  357.                                              alt="{{ productMedia.title }}" class="br-8 he-650 img-fit w-100"/>
  358.                                     </div>
  359.                                 {% endif %}
  360.                             {% endfor %}
  361.                         </div>
  362.                     </div>
  363.                 {% endif %}
  364.             </div>
  365.         </section>
  366.         {% if productProducts %}
  367.             <section id="solutions" class=" section-grey  position-relative overflow-hidden pay-100-md  pay-70">
  368.                 <img src="{{ asset('assets/img/Motif.png') }}" alt="background motif"
  369.                      class="uexpmv w-100 b-0 l-0 img-fit position-absolute"/>
  370.                 <div class="position-relative zi-9" data-aos="fade-up" data-aos-duration="800">
  371.                     <h3 class=" pax-15 text-center d-table mx-auto c-333333 fs-38 fw-700 mat-0 mab-60 position-relative mawi-460">
  372.                         <img src="{{ asset('assets/img/points.svg') }}"
  373.                              class="position-absolute grayscale2  t--20 l--20 zi-0" alt="points icon"/>
  374.                         {{ "product.subCategory.title"|trans|raw }}</h3>
  375.                     <div class="container">
  376.                         <div class="position-relative">
  377.                             {% if productProducts|length > 3 %}
  379.                                 <div class="pointer prev-prod-rel-slid position-absolute l--30-sm l-0 zi-99 t-0 b-40 d-flex align-items-center justify-content-center">
  380.                                     <img src="{{ asset('assets/img/next-arrow.svg') }}" alt="prev arrow"
  381.                                          class="rot-180"/>
  382.                                 </div>
  383.                                 <div class="pointer next-prod-rel-slid  position-absolute r--30-sm r-0 zi-99 t-0 b-40 d-flex align-items-center justify-content-center">
  384.                                     <img src="{{ asset('assets/img/next-arrow.svg') }}" alt="next arrow"/>
  385.                                 </div>
  386.                             {% endif %}
  387.                             <div class="slick-products">
  388.                                 {% include "front/productsList.html.twig" with {'products':productProducts,'categoryActive':category,'sliderProduct' : true} %}
  389.                             </div>
  390.                         </div>
  391.                     </div>
  392.                 </div>
  393.             </section>
  394.         {% endif %}
  395.     </div>
  396.     {% for key, productProductMedia in productProductMedias %}
  397.         {% set productMedia = productProductMedia.productMedia %}
  398.         {% if productMedia.youtube %}
  399.             <div class="modal fade modalVideo" id="mediaModal{{ loop.index }}" tabindex="-1" role="dialog"
  400.                  aria-labelledby="skillYoutubeModalLabel" aria-hidden="true">
  401.                 <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
  402.                     <div class="modal-content">
  403.                         <button type="button"
  404.                                 class="close may-0 max-0 pa-0 position-absolute bgc-f8fafc c-204A9A o-100 wi-30 fs-16 he-30 t--15 r--15 zi-99 br-20"
  405.                                 data-dismiss="modal" aria-label="Close">
  406.                             <i class="far fa-times" aria-hidden="true"></i>
  407.                         </button>
  408.                         <div class="modal-body">
  409.                             {{ productMedia.youtube|raw }}
  410.                         </div>
  411.                     </div>
  412.                 </div>
  413.             </div>
  414.         {% endif %}
  415.     {% endfor %}
  416.     {% for key, productProductAddon in productSoftwareProductAddons %}
  417.         {% set productAddon = productProductAddon.productAddon %}
  418.         <div class="modal fade modalVideo modalAddon" id="softwareAddonSliderModal{{ loop.index }}" tabindex="-1"
  419.              role="dialog"
  420.              aria-labelledby="skillYoutubeModalLabel" aria-hidden="true">
  421.             <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
  422.                 <div class="modal-content">
  423.                     <button type="button"
  424.                             class="close may-0 max-0 pa-0 position-absolute bgc-F3F3F3 c-494A4B o-100 wi-40 fs-16 he-40 t-30 r-30 zi-99 br-20"
  425.                             data-dismiss="modal" aria-label="Close">
  426.                         <i class="far fa-times" aria-hidden="true"></i>
  427.                     </button>
  428.                     <div class="modal-body pa-0">
  429.                         <div class="d-md-flex align-items-stretch">
  430.                             <div class="bgc-f3f3f3 brw-1 brs-solid bc-D9D9D9 col-md-6 d-flex align-items-center justify-content-center pa-50-lg pa-30">
  431.                                 <img src="{{ asset(vich_uploader_asset(productAddon, 'productAddonFile'))|imagine_filter('medium') }}"
  432.                                      alt="{{ productAddon.title }}" class="img-contain multiply"/>
  433.                             </div>
  434.                             <div class="col-md-6 text-center text-md-left pay-70-lg pay-30 pax-20 pax-50-lg d-flex align-items-center">
  435.                                 <div>
  436.                                     <div class="fs-26 fw-700 c-333333 mab-30 ">
  437.                                         {{ productAddon.title }}
  438.                                     </div>
  439.                                     {{ productAddon.description|raw }}
  440.                                 </div>
  441.                             </div>
  442.                         </div>
  444.                     </div>
  445.                 </div>
  446.             </div>
  447.         </div>
  448.     {% endfor %}
  449.     {% for key, productProductAddon in productHardwareProductAddons %}
  450.         {% set productAddon = productProductAddon.productAddon %}
  451.         <div class="modal fade modalVideo modalAddon" id="hardwareAddonSliderModal{{ loop.index }}" tabindex="-1"
  452.              role="dialog"
  453.              aria-labelledby="skillYoutubeModalLabel" aria-hidden="true">
  454.             <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
  455.                 <div class="modal-content">
  456.                     <button type="button"
  457.                             class="close may-0 max-0 pa-0 position-absolute bgc-F3F3F3 c-494A4B o-100 wi-40 fs-16 he-40 t-30 r-30 zi-99 br-20"
  458.                             data-dismiss="modal" aria-label="Close">
  459.                         <i class="far fa-times" aria-hidden="true"></i>
  460.                     </button>
  461.                     <div class="modal-body pa-0">
  462.                         <div class="d-md-flex align-items-stretch">
  463.                             <div class="bgc-f3f3f3 brw-1 brs-solid bc-D9D9D9 col-md-6 d-flex align-items-center justify-content-center pa-50-lg pa-30">
  464.                                 <img src="{{ asset(vich_uploader_asset(productAddon, 'productAddonFile'))|imagine_filter('medium') }}"
  465.                                      alt="{{ productAddon.title }}" class="img-contain multiply"/>
  466.                             </div>
  467.                             <div class="col-md-6 text-center text-md-left pay-70-lg pay-30 pax-20 pax-50-lg d-flex align-items-center">
  468.                                 <div>
  469.                                     <div class="fs-26 fw-700 c-333333 mab-30 ">
  470.                                         {{ productAddon.title }}
  471.                                     </div>
  472.                                     {{ productAddon.description|raw }}
  473.                                 </div>
  474.                             </div>
  475.                         </div>
  477.                     </div>
  478.                 </div>
  479.             </div>
  480.         </div>
  481.     {% endfor %}
  482. {% endblock %}