{% extends 'Default/base.html.twig' %}
{% set menu = 'home' %}
{% set home = true %}
{% import "Default/macros.html.twig" as macros %}

{% block banner %}
<div id="banner" class='relative w100 hoverflow htop-in {{desktop("vh100")}} {{mobile("vhhalf")}}'>
    <div id="homeSlider" class="os-slider auto overflow-scroll fill flex row space transition-2s" data-time="10000">
        {% for o in banners %}
        <div class="os-slider-child relative fill min-w100">
            <figure class='absolute top left fill hoverflow {{desktop("")}} {{mobile("")}}'>
                <img src='{{asset(o.banner)}}' class='cover anim-display anim-show-alt opened transition-3s ' loading="lazy">
            </figure>
            <div class="relative fill flex row space bottom  {{desktop('gpadding bottom-40-in')}}{{mobile('')}}">
                <div class="flex row space">
                    <span class="os-slider-prev bg-white icon medium circle shadow-alt {{desktop("padding-15")}} {{mobile("padding-5")}}" data-target="#homeSlider">
                        <span class="block icon fill circle arrow-left contain"></span>
                    </span>
                    <span class="os-slider-next bg-white icon medium circle shadow-alt {{desktop("padding-15")}} {{mobile("padding-5")}}" data-target="#homeSlider">
                        <span class="block icon fill circle arrow-right contain"></span>
                    </span>
                </div>
                <div class="iflex col space {{desktop('third_80')}}">
                    <i></i>
                    <div class="relative hoverflow anim-display anim-from-right opened transition-3s {{desktop('vt-40-in hz-40-in ')}}{{mobile('vt-10-in hz-20-in')}}">
                        <i class="fill absolute top left bg-success transparent"></i>
                        <div class="relative flex col left middle white">

                            <h2 class="h4 white lh-1x">{{o|os_trans("title")}}</h2>
                            {% if isDesktop() %}
                            <p class="{{desktop('vt-15')}} {{mobile('vt-10')}}">
                                {{o|os_trans("description")|nl2br}}
                            </p>
                            {% endif %}
                            {% if o.link and o.link is not empty %}
                            <div class="{{desktop('')}}{{mobile('')}}">
                                <a class="flex row middle {{desktop(' bg-white success radius-5 vt-10-in hz-20-in')}}{{mobile('top-10 warning underline')}}" href="{{o.link ?? '#'}}">
                                    <span class="upper bold">{{o|os_trans("btnTitle")}}</span>
                                </a>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}

{% block content %}

{% macro bar(common, desktop = "radius-10 hz-80-in vt-7-in bottom-40", mobile = "radius-7 hz-60-in vt-3-in bottom-20 top-7") %}
<i class="{{common}} {{desktop(desktop)}} {{mobile(mobile)}} "></i>
{% endmacro %}

<div class='flex col center gpadding relative w100 {{desktop("vt-40-in")}} {{mobile("vt-20-in")}}'>
    <h2 class="success">{{"Nos produits et services"|os_trans("Our products and services")}}</h2>

    {{_self.bar("bg-warning")}}

    {% for o in products %}
    <div class="flex space relative {{desktop('row vt-50 hz-80-in '~ (loop.index is even ? 'reverse'))}} {{mobile('col vt-15 hz-20-in')}}">
        <figure class='relative hoverflow anim-scroll {{loop.index is odd ? 'anim-from-left' : 'anim-from-right'}} transition-2s {{desktop("half-40 radius-20 ")}} {{mobile("mrect radius-10")}}'>
            <img src='{{asset(o.banner)}}' class='scale-hover block cover transition-1s' loading="lazy">
        </figure>
        <div class="flex col middle anim-scroll {{loop.index is odd ? 'anim-from-right' : 'anim-from-left'}} transition-3s {{desktop('half-40 vt-80-in '~ (loop.index is even ? 'text-right right' : 'left'))}} {{mobile('w100 left vt-10-in top-10')}}">
            <h3 class="success">{{o|os_trans("title")}}</h3>
            <p class="{{desktop('vt-20')}} {{mobile('vt-10')}}">{{o|os_trans("description")|nl2br}}</p>
            {% if o.link and o.link is not empty and o.btnTitle is not empty %}
            <a class="flex row middle bg-success white {{desktop('radius-5 vt-15-in hz-20-in')}}{{mobile('radius-3 vt-10-in hz-10-in top-8')}}" href="{{o.link ?? '#'}}">
                <span class="bold">{{o|os_trans("btnTitle")}}</span>
            </a>
            {% endif %}
        </div>
    </div>
    {% endfor %}
</div>

<div class='flex row middle center relative w100 gpadding {{desktop("row vt-80-in")}} {{mobile("vt-20-in gpadding")}}'>
    <div class="{{desktop('quarter-40 right-40-in ')}}">
        <h2 class="h3 success lh-2x">{{"Nos services clients"|os_trans("Our customer services")}}</h2>
        <p>Nous mettons à vos dispositions une panoplie d'outils pour mieux vous servir.</p>
    </div>
    <div class="relative flex col center w100">
        <div class="w100 flex row top space {{desktop('')}} {{mobile('')}}">
            <div class=" w100 flex {{desktop('row space center')}} {{mobile('col vt-10-in')}}">
                {% for o in services %}
                <a href="{{o.btnLink}}"
                    class="anim-scroll anim-popup transition-4s flex {{desktop('flex-1 radius-10 col center text-center left-20')}} {{mobile('flex row middle padding-20 radius-5 vt-10')}}">
                    <span class="flex col center middle padding-20 circle scale-hover-alt transition">
                        <icon class="relative icon contain transition {{desktop('big')}} {{mobile('medium')}}">
                            <img src="{{asset(o.icon)}}" class="contain transition" loading="lazy">
                        </icon>
                    </span>
                    <h2 class="p-alt light {{desktop('top-20')}} {{mobile('left-20')}}">{{o|os_trans('btnText')}}</h2>
                </a>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
{#
<div class='flex col center relative w100 {{desktop("vt-80-in")}} {{mobile("vt-20-in gpadding")}}'>
    <figure class="absolute fill top left">
        <img src="{{b}}" class="cover" loading="lazy">
    </figure>
    <div class="bg-black transparent absolute fill top left"></div>
    <div class="relative flex col center w100">
        <h2 class="white">Nos services clients</h2>
        <p class="h6 white">Nous mettons à vos dispositions une panoplie d'outils pour mieux vous servir.</p>
        <div class="w100 flex row space {{desktop('vt-20-in')}} {{mobile('')}}">
            <div class="w100 flex row top space {{desktop('gpadding hoverflow')}} {{mobile('')}}">
                <div class=" w100 flex {{desktop('row space center top-40-in')}} {{mobile('col vt-10-in')}}">
                    {% for o in list %}
                    <a href="{{o.href}}"
                        class="anim-scroll anim-popup transition-4s flex {{desktop('flex-1 radius-10 hz-10-in col center text-center '~(loop.index != loop.last ? 'right-30'))}} {{mobile('flex row middle padding-20 radius-5 vt-10')}}">
                        <span class="flex col center middle padding-20 circle scale-hover transition">
                            <icon class="relative icon contain transition {{desktop('big')}} {{mobile('medium')}}">
                                <img src="{{asset(o.icon)}}" class="contain filter-white transition" loading="lazy">
                            </icon>
                        </span>
                        <h2 class="h6 medium white {{desktop('top-30')}} {{mobile('left-20')}}">{{o.label}}</h2>
                    </a>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>
#}

<div class='flex col center gpadding relative w100 {{desktop("vt-80-in")}} {{mobile("vt-20-in")}}'>
    <h2 class="success">{{"Nos dernières actualités"|os_trans("Our last posts")}}</h2>
    {{_self.bar("bg-warning")}}
    <div class="w100 flex row space wrap">
        {% for o in articles %}
        {{macros.article(o)}}
        {% endfor %}
    </div>
</div>

{% endblock content %}