{extends file="includes/layout.html"}

{block name="styles"}
<link href="{$templates_dir}css/page-home.min.css?{$global_version}" rel="stylesheet">
{/block}

{block name="main"}
<div role="main" class="main home-page" id="main">

    <div class="container">

        <section class="section-main-banner">
            <div class="swiper main-banner" id="main-banner">
                <div class="swiper-wrapper">
                    {foreach $banerHomepageTop as $item}
                    {if !empty($item.redirect)}<a class="swiper-slide" href="{$item.redirect}" target="{$item.target}" rel="{if $item.link_follow}follow{else}nofollow{/if}">{else}<div class="swiper-slide">{/if}
                        <div class="main-banner__img">
                            {* data-mobile trzeba podać ścieżkę dla mobila *}
                            {if $item.mainImageExtenion=='mp4'}
                            <video muted autoplay loop preload="auto"
                                data-mobile="{$uriPrefix}{$item.secondMainImageFilename}"
                                data-desktop="{$uriPrefix}{$item.mainImageFilename}">
                                <source src="" type="video/mp4">
                                Your browser does not support the video tag.
                            </video>
                            {else}
                                <picture>
                                    <source data-srcset="{image f=$item.secondMainImageFilename w=366 h=786 m=cr r=path}" media="(max-width: 1023px)">
                                    <source data-srcset="{image f=$item.mainImageFilename w=1920 h=786 m=cr r=path}" media="(max-width: 1600px)">
                                    <img data-src="{image f=$item.mainImageFilename w=1920 h=786 m=cr r=path}" alt="" width="1920" height="786"
                                        class="img-cover lazy" />
                                </picture>
                            {/if}
                        </div>
                        <div class="main-banner__showcase">
                            {$item.content|show_images}
                        </div>
                        {if !empty($item.redirect)}</a>{else}</div>{/if}
                    {/foreach}
                    {*
                        {foreach range(0,1) as $item}
                        <div class="swiper-slide">
                            <div class="main-banner__img">
                                <picture>
                                    <source data-srcset="{$templates_dir}img/img-b.jpg" media="(max-width: 1023px)">
                                    <source data-srcset="{$templates_dir}img/img-b.jpg" media="(max-width: 1600px)">
                                    <img data-src="{$templates_dir}img/img-b.jpg" alt="" width="1920" height="786"
                                        class="img-cover lazy" />
                                </picture>
                            </div>
                            <div class="main-banner__showcase">
                                <h1><strong>Have it all</strong><br> wszystko co najlepsze, <br> na wyciągnięcie ręki</h1>
                                <p class="lead">Jeden produkt, całe mnóstwo wartości. <br> Poznaj naszą filozofię.</p>
                                <img data-src="{$templates_dir}img/logo-banner.png" alt="" class="lazy" width="124" height="110">
                            </div>
                        </div>
                        {/foreach}      
                    *}
                </div> 
                <div class="swiper-pagination"></div>
                {include file="includes/components/swiper-button-prev.html"}
                {include file="includes/components/swiper-button-next.html"}
            </div>
        </section>

        {include file="includes/sections/products-carousel.html"}

        {include file="includes/sections/info-banner-carousel.html"}

        {include file="includes/sections/blog-carousel.html"}

        {include file="includes/sections/about-us-banner.html"}

        {include file="includes/sections/IG-carousel.html"}

    </div>

</div>
{/block}

{block name="scripts"}
<script src="{$templates_dir}js/page-home.min.js?{$global_version}"></script>
{/block}