{% extends "base.html.twig" %} 
{% set h1 = subCategory.h1 %} 
{% set whiteMenu = true %} 
{% block metaTags %} 
    <meta name="description" content="{{ subCategory.metaDescription }}"> 
    <title>{{ subCategory.metaTitle }}</title> 
    <meta property="og:title" content="{{ subCategory.metaTitle }}"> 
    <meta property="og:description" content="{{ subCategory.metaDescription }}"> 
{% endblock %} 
{% block body %} 
    {% set category = subCategory.category %} 
    <section class="position-relative bgp-center bgs-cover header-presentation first-section" 
             {% if subCategory.subCategoryFileName %}style="background-image:linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)),url({{ asset(vich_uploader_asset(subCategory, 'subCategoryFile'))|imagine_filter('large') }})"{% elseif category and category.categoryFileName %} style="background-image:linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)),url({{ asset(vich_uploader_asset(category, 'category1File'))|imagine_filter('large') }})" {% endif %}> 
        <img src="{{ asset('assets/img/points_blue.svg') }}" class="position-absolute t-120 l-0 zi-0" 
             alt="points icon"/> 
        <div class="container position-relative he-480 d-flex  align-items-center"> 
            <img src="{{ asset('assets/img/points_blue.svg') }}" class="position-absolute b-45 r-75 zi-99" 
                 alt="points icon"/> 
            {% if category and category.categoryIconFileName %} 
                <div data-aos="fade-left"  data-aos-duration="800" data-aos-delay='400'  class="position-absolute b--70-md b--50 r-0-lg r-20 zi-9"> 
                    <img src="{{ asset('assets/img/hexagone-big.svg') }}" alt="hexagone" 
                         class="he-140-md he-100 {{ category.position == "1" ? "hexagone-green" : (category.position == "2" ? "hexagone-lightBlue") }} "/> 
                    <img src="{{ asset(vich_uploader_asset(category, 'categoryIconFile')) }}" 
                         alt="{{ category.title }}" 
                         class="img-white position-absolute t-0 b-0 wi-65-md wi-55 h-auto l-0 r-0 m-auto img-white"/> 
                </div> 
            {% endif %} 
            <div class="position-absolute t-20 l-20 zi-9"> 
                {#                {% include "front/menu.html.twig" with {'menu':{("menu.presentation"|trans):path("front_presentation")} %} #} 
                {#                {% include "front/menu.html.twig" with {'menu':{(category.title):"#"}} %} #} 
                {% include "front/menu.html.twig" with {'menu':{ 
                    (category.title):path("front_products", {'catSlug':category.slug}), 
                    (subCategory.title):path("front_sub_category", { "slug":subCategory.slug}), 
                }, "whiteMenu":true, "isBold":true} %} 
            </div> 
            <div class="position-relative"> 
                <h2 data-aos="fade-down"  data-aos-duration="800" data-aos-delay='200' class="text-left c-white fs-70 fw-600 mab-35 position-relative mawi380"> 
                    {{ subCategory.title }} 
                </h2> 
                <div class="d-flex cg-15 justify-content-center-sm"> 
                    <a data-aos="fade-right"  data-aos-duration="800" data-aos-delay='600' href="#ourSolutions" class="btn link-smooth btn1"> 
                        {{ "application.solutions.btn"|trans }} 
                    </a> 
                    <a data-aos="fade-left"  data-aos-duration="800" data-aos-delay='600' href="{{ path('front_contact') }}/#contactFormContainer" class="btn btn2"> 
                        {{ "landing.header.contact.btn"|trans }} 
                        <i class="fa fa-caret-right mal-5"></i> 
                    </a> 
                </div> 
            </div> 
        </div> 
    </section> 
    <div class="menu-sticky d-table"> 
        <ul class="0"> 
            {% set productBlocs = {("application.sticky.about"|trans):"#presentation2"} %} 
 
            {% set hardwareProducts = getSubCategoryProducts(subCategory, true) %} 
            {% set productBlocs = (hardwareProducts ? productBlocs|merge({("application.sticky.hardware"|trans):"#hardwareProductsApp"}) : productBlocs) %} 
 
            {% set softwareProducts = getSubCategoryProducts(subCategory, false) %} 
            {% set productBlocs = (softwareProducts ? productBlocs|merge({("application.sticky.software"|trans):"#softwareProductsApp"}) : productBlocs) %} 
 
            {% set subCategories = (category ? getSubCategories(category.id, subCategory.id) : []) %} 
            {% set productBlocs = (subCategories ? productBlocs|merge({("application.sticky.applications"|trans):"#relatedApp"}) : productBlocs) %} 
 
            {% for key, linkNav in productBlocs %} 
                {#            {% for key, linkNav in getApplicationsBloc() %} #} 
 
                <li role="button" data-href="{{ linkNav }}" class=" c-9DC771-h c-888888 pointer  fw-600 fs-12 mab-10"> 
                    <a  class="  c-inherit  nav-sticky pointer" 
                        href="{{ linkNav }}"> 
                        {{ key }} 
                    </a> 
                </li> 
            {% endfor %} 
        </ul> 
    </div> 
    <div class="main main-div"> 
        <section id="presentation2"> 
 
            <div class="pat-100-md pab-100-md pat-80 pab-80-sm pab-50 section-grey position-relative overflow-hidden"> 
                <img src="{{ asset('assets/img/Motif.png') }}" alt="background motif" 
                     class="uexpmv w-100 b-0 l-0 img-fit position-absolute"/> 
                <div class="position-relative zi-9 mx-auto mawi-810 "> 
                    {% include "front/productIntro.html.twig" with {'title':subCategory.introTitle, "description":subCategory.description} %} 
                </div> 
            </div> 
            <div class="container" id="ourSolutions"> 
 
                {% include "front/productParagraph.html.twig" with {'productParagraphs':getSubCategoryParagraphs(subCategory)} %} 
            </div> 
        </section> 
        {% include "front/productsSection.html.twig" with {'id' : 'hardwareProductsApp','arrows' : 'hardprod','class' : 'pat-50 pab-70','surTitle':("subCategory.hardwareProducts.surTitle"|trans),'title':subCategory.hardwareProductsTitle, "products":hardwareProducts} %} 
        {% include "front/productsSection.html.twig" with {'id' : 'softwareProductsApp','arrows' : 'softprod','class' : 'pat-110 pab-70','surTitle':("subCategory.softwareProducts.surTitle"|trans),'title':subCategory.softwareProductsTitle, "products":softwareProducts} %} 
 
        {#    <section class="pat-110 pab-110 section-grey position-relative overflow-hidden"> 
                <img src="{{ asset('assets/img/Motif.png') }}" alt="background motif" class="uexpmv w-100 b-0 l-0 img-fit position-absolute"/> 
                <div class="position-relative zi-9"> 
                    <div class="surtitle text-center c-204A9A mab-20 fs-16 fw-600 text-uppercase ls-custom2"> 
                        {{ "subCategory.softwareProducts.surTitle"|trans }} 
                    </div> 
                    <h3 class="text-center d-table mx-auto c-333333 fs-38 fw-700 mat-0 mab-35 position-relative"> 
                        <img src="{{ asset('assets/img/points.svg') }}" class="position-absolute grayscale2  t--20 l--20 zi-0" alt="points icon"/> 
                        {{"subCategory.softwareProducts.title"|trans|raw}}</h3> 
                    <div class="container"> 
                    </div> 
                </div> 
            </section> #} 
        {% if category and subCategories %} 
            <section id="relatedApp" class="pat-110 pab-110 section-grey position-relative overflow-hidden"> 
                <img src="{{ asset('assets/img/Motif.png') }}" alt="background motif" 
                     class="uexpmv w-100 b-0 l-0 img-fit position-absolute"/> 
                <div class="container position-relative zi-9"> 
                    <div class="surtitle text-center c-204A9A mab-20 fs-16 fw-600 text-uppercase ls-custom2"> 
                        {{ category.title }} 
                    </div> 
                    <h3 class="text-center d-table mx-auto c-333333 fs-38 fw-700 mat-0 mab-35 position-relative"> 
                        <img src="{{ asset('assets/img/points.svg') }}" 
                             class="position-absolute grayscale2  t--20 l--20 zi-0" alt="points icon"/> 
                        {{ "subCategory.otherApplications.title"|trans|raw }} 
                    </h3> 
                    <div class="position-relative pax-0-lg pax-30"> 
                        {% if subCategories|length > 3 %} 
                            <div class="pointer prev-app-slid position-absolute l--30-sm l-0 zi-99 vertical-arrow"> 
                                <img src="{{ asset('assets/img/next-arrow.svg') }}" alt="prev arrow" class="rot-180"/> 
                            </div> 
                            <div class="pointer next-app-slid  position-absolute r--30-sm r-0 zi-99 vertical-arrow"> 
                                <img src="{{ asset('assets/img/next-arrow.svg') }}" alt="next arrow"/> 
                            </div> 
                        {% endif %} 
                        <div class="slick-otherApp slick-slider"> 
                            {% for key, application in subCategories %} 
                                <div data-link class=" animate-link2 text-center pax-15"  > 
                                    <div class="he-300-lg he-250 w-100 boxShadow2 img bgc-white br-8 d-flex align-items-center justify-content-center pa-40"> 
                                        <img src="{{ asset(vich_uploader_asset(application, 'subCategory1File'))|imagine_filter('medium') }}" 
                                             alt="{{ application.title }}" class=""/> 
                                    </div> 
                                    <a href="{{ path('front_sub_category', {'slug':application.slug}) }}"> 
                                        <h4 class="fs-22 fw-600 c-204A9A mat-45 mab-15"> 
                                            {{ application.title }} 
                                        </h4> 
                                    </a> 
                                    <div class="fs-14 c-333333 lh2-18"> 
                                        {{ application.intro }} 
                                    </div> 
                                </div> 
                            {% endfor %} 
                        </div> 
                    </div> 
                </div> 
            </section> 
        {% endif %} 
    </div> 
{% endblock %}