{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="home-page__top" style="background-image: url({$templates_dir}gfx/category-bg.png)">
    {if $BannerTop|count>0}
        <section class="banner-main">
            <div class="container">
                <div class="row">
                    <div class="col-lg-19 offset-lg-1">
                        <div class="swiper swiper-container banner-main__carousel" id="bannerMainCarousel" 
                           {* {if $BannerTop|count< 3} style="height: 635px; padding-bottom: 0;" {/if} *}>
                            <div class="swiper-wrapper">
                            {foreach $BannerTop as $v}
                                {if $v@iteration%2 == 1}
                                    <div class="swiper-slide">
                                        <article class="banner-main__slide banner-main__slide--odd">
                                            <h2 class="banner-main__heading">
                                                <a {if $v.redirect} href="{$v.redirect}" {if $v.link_follow!="1"} rel="nofollow"{/if} {if $v.target}target="{$v.target}"{/if} {/if}>{$v.title|nl2br}</a>
                                            </h2>
                                            <a {if $v.redirect} href="{$v.redirect}" {if $v.link_follow!="1"} rel="nofollow"{/if} {if $v.target}target="{$v.target}"{/if} {/if} class="banner-main__image">
                                                {if $v.mimeType[0]=='video'}
                                                    <video muted autoplay>
                                                        {foreach $v.mediaList as $m_file}
                                                            {if $m_file.main==2}{continue}{/if}
                                                            <source src="{$uriPrefix}{$m_file.filename}" type="video/{$m_file.extension}">
                                                        {/foreach}
                                                        This browser does not support the HTML5 video element.
                                                    </video>
                                                {else}
                                                    <img src="{image f=$v.mainImageFilename w=760 h=353 m=cr return='path'}" alt="{$v.mainImageAlt}" class="img-cover">
                                                {/if}
                                            </a>
                                            <p class="banner-main__lead">
                                                {$v.content}
                                            </p>
                                        </article>
                                    </div>
                                {else}
                                    <div class="swiper-slide">
                                        <article class="banner-main__slide banner-main__slide--even">
                                            <a {if $v.redirect} href="{$v.redirect}" {if $v.link_follow!="1"} rel="nofollow"{/if} {if $v.target}target="{$v.target}"{/if} {/if} class="banner-main__image">
                                                {if $v.mimeType[0]=='video'}
                                                    <video muted autoplay>
                                                        {foreach $v.mediaList as $m_file}
                                                            {if $m_file.main==2}{continue}{/if}
                                                            <source src="{$uriPrefix}{$m_file.filename}" type="video/{$m_file.extension}">
                                                        {/foreach}
                                                        This browser does not support the HTML5 video element.
                                                    </video>
                                                {else}
                                                    <img src="{image f=$v.mainImageFilename w=760 h=353 m=cr return='path'}" alt="{$v.mainImageAlt}" class="img-cover">
                                                {/if}
                                            </a>
                                            <h2 class="banner-main__heading">
                                                <a {if $v.redirect} href="{$v.redirect}" {if $v.link_follow!="1"} rel="nofollow"{/if} {if $v.target}target="{$v.target}"{/if} {/if}>{$v.title|nl2br}</a>
                                            </h2>
                                            <p class="banner-main__lead">
                                                {$v.content}
                                            </p>
                                        </article>
                                    </div>
                                {/if}
                            {/foreach}
                            </div>
                        </div>
                    </div>

                    {if $BannerTop|count>2}
                    <div class="swiper-pagination-nav banner-main__pagination">
                        <div class="swiper-pagination-prev"></div>
                        <div class="swiper-pagination"></div>
                        <div class="swiper-pagination-next"></div>
                    </div>

                    <div class="swiper-navigation-arrow banner-main__arrow">
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-button-next"></div>
                    </div>
                    {/if}
                </div>
            </div>
        </section>
    {/if}

    {if $element.contentElements.ContentTemplateList[0].parent.name && $element.contentElements.ContentTemplateList[0].scions|count>0}
        <section class="section-category">
            <div class="container">
                <div class="row">
                    <div class="col-lg-20 offset-lg-1 col-xlg-17 offset-xlg-2 col-xxl-19">
                        <div class="section-category__menu">
                            {foreach $element.contentElements.ContentTemplateList[0].scions as $item}
                            <a href="javascript:void();" data-value="{$item@iteration}" data-changeCategory class="section-category__menu-item {if $item@first}active{/if}">{$item.profileFields[0].final_value}</a>
                            {/foreach}
                        </div>
                    </div>
                </div>
            </div>

            <div class="section-category__content">
                {foreach $element.contentElements.ContentTemplateList[0].scions as $item}
                <div class="section-category__item" data-category-item="{$item@iteration}" {*{if $item@first} style="max-height: 10000px;"{/if}*} > 
                    <div class="container"> 
                        <div class="row">
                            <div class="category-top">
                                <div class="row">
                                    <div class="order-2 order-lg-1 col-lg-6 offset-lg-1 col-xxl-7">
                                        <div class="category-top__left">
                                            <h3 class="category-top__heading">{$item.profileFields[0].final_value}</h3>
                                            <div class="category-top__lead">
                                                {$item.profileFields[1].final_value|nl2br}
                                            </div>
                                            
                                            {if $item.redirect}
                                                <a href="{$item.redirect}" class="btn btn--box-primary" 
                                                   {if $item.link_follow!="1"} rel="nofollow"{/if} 
                                                   {if $item.target}target="{$item.target}"{/if}>
                                                    {'general_get_more'|translate}
                                                </a>
                                            {/if}
                                        </div>
                                    </div>

                                    {if $categoryList[ $item.id_category ].nodes|count>0}
                                        <div class="order-1 order-lg-2 col-lg-11 offset-lg-1 offset-xxl-0">
                                            <div class="category-top__products">
                                                <div class="swiper swiper-container product-carousel">
                                                    <div class="swiper-wrapper">
                                                        {foreach $categoryList[ $item.id_category ].nodes as $item}
                                                            {* Trzeci element na starcie dostaje klase: swiper-slide-opacity *}
                                                            <div class="swiper-slide {if $p@iteration==3}swiper-slide-opacity{/if}">
                                                                <a href="{$categoryURLList[ $item.id ]}" class="categories-carousel__slide">
                                                                    <h2>{$item.name}</h2>
                                                                    {*<!--<p>{$item.short_content}</p>-->*}
                                                                    {if $item.mainImageFilename}
                                                                        <img src="{image f=$item.mainImageFilename w=341 h=540 m=cr return='path'}" alt="{$item.mainImageAlt}" class="img-cover">
                                                                    {/if}
                                                                    <span class="categories-carousel__btn">&gt;</span>
                                                                </a>
                                                            </div>
                                                        {/foreach}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        {if $categoryList[ $item.id_category ].nodes|count>1}
                                            {* Tutaj jest dołączany $key głównego slajderu*}
                                            <div class="swiper-navigation-arrow product-carousel__arrow product-carousel__arrow-{$item@iteration}">
                                                <div class="swiper-button-prev"></div>
                                                <div class="swiper-button-next"></div>
                                            </div>
                                        {/if}
                                    {else if $item.ProductList|count>0}
                                        <div class="order-1 order-lg-2 col-lg-11 offset-lg-1 offset-xxl-0">
                                            <div class="category-top__products">
                                                <div class="swiper swiper-container product-carousel">
                                                    <div class="swiper-wrapper">
                                                        {foreach $item.ProductList as $p}
                                                            {* Trzeci element na starcie dostaje klase: swiper-slide-opacity *}
                                                            <div class="swiper-slide {if $p@iteration==3}swiper-slide-opacity{/if}">
                                                                <a href="{seoLink id_element=$p.id parentLink="{$categoryURLList[$p.id_main_category]}"}" class="product-carousel__item">
                                                                    {if $p.producer.secondMainImageFilename}
                                                                    <div class="product-carousel__logo">
                                                                        <img src="{image f=$p.producer.secondMainImageFilename h=32 m=nc return='path'}" alt="{$p.producer.secondMainImageAlt}">
                                                                    </div>
                                                                    {/if}
                                                                    <div class="product-carousel__desc">
                                                                        {$p.short_content|nl2br}
                                                                    </div>
                                                                    <div class="product-carousel__number">
                                                                        <span>{$p.symbol}</span>
                                                                    </div>
                                                                    {if $p.mainImageFilename}
                                                                    <div class="product-carousel__image">
                                                                        <img src="{image f=$p.mainImageFilename w=300 h=370 m=nc return='path'}" alt="{$p.mainImageAlt}">
                                                                    </div>
                                                                    {/if}
                                                                    <span class="product-carousel__link"></span>
                                                                </a>
                                                            </div>
                                                        {/foreach}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        {if $item.ProductList|count>1}
                                            {* Tutaj jest dołączany $key głównego slajderu*}
                                            <div class="swiper-navigation-arrow product-carousel__arrow product-carousel__arrow-{$item@iteration}">
                                                <div class="swiper-button-prev"></div>
                                                <div class="swiper-button-next"></div>
                                            </div>
                                        {/if}
                                    {/if}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="category-bottom">
                        <div class="container">
                            <div class="row">
                                <div class="col-lg-17 offset-lg-2">
                                    <div class="category-bottom__content">
                                        <div class="category-bottom__left">
                                            <div class="category-bottom__heading">
                                                {'section_producer_name'|translate}
                                            </div>
                                        </div>
                                        {if $item.ProducerList|count>0}
                                        <div class="category-bottom__right">
                                            <div class="swiper swiper-container producers-carousel">
                                                <div class="swiper-wrapper">
                                                {foreach $item.ProducerList as $p}
                                                <div class="swiper-slide">
                                                    <a {if $p.active==1}href="{seoLink id_element=$p.id parentLink="{seoParentLink module='ProducerModule'}"}"{/if} class="producers-carousel__slide">
                                                        {if $p.mainImageFilename}
                                                            <img src="{image f=$p.mainImageFilename w=166 h=66 m=nc return='path'}" alt="{$p.mainImageAlt}">
                                                        {/if}
                                                    </a>
                                                </div>
                                                {/foreach}
                                                </div>
                                            </div>
                                        </div>
                                        {/if}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {/foreach}
            </div>
        </section>
    {/if}
    </div>

    <div class="home-page__center">

        {if $element.contentElements.ContentTemplateList[1].parent.name}
        <section class="section-aboutUs">
            <div class="container">
                {* Kreski na obrazku *}
                <div class="row">
                    <span class="separator-left-top"></span>
                    <span class="separator-left-bottom"></span>
                    <span class="separator-right"></span>
                    <div class="col-lg-7 offset-lg-1 col-xxl-8 offset-xxl-0">
                        <div class="section-aboutUs__left">
                            <p class="section-aboutUs__heading">
                                {$element.contentElements.ContentTemplateList[1].parent.profileFields[0].final_value}
                            </p>
                        </div>
                    </div>
                    <div class="col-lg-10 offset-lg-1 col-xxl-7">
                        <div class="section-aboutUs__right">
                            {$element.contentElements.ContentTemplateList[1].parent.profileFields[1].final_value}

                            {if $element.contentElements.ContentTemplateList[1].parent.redirect}
                                <a href="{$element.contentElements.ContentTemplateList[1].parent.redirect}" class="btn section-aboutUs__link" 
                                   {if $element.contentElements.ContentTemplateList[1].parent.link_follow!="1"} rel="nofollow"{/if} 
                                   {if $element.contentElements.ContentTemplateList[1].parent.target}target="{$element.contentElements.ContentTemplateList[1].parent.target}"{/if}>
                                    {'general_more'|translate}
                                </a>
                            {/if}
                        </div>
                    </div>
                </div>
            </div>
        </section>
        {/if}

        {if $element.contentElements.ContentTemplateList[2].parent.name}
        <section class="section-count">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8">
                        <div class="section-count__left">
                            <div class="section-count__logo">
                              {include file="gfx/logo-kaleta-black.svg"}
                            </div>
                            <h3 class="section-count__heading">
                                {$element.contentElements.ContentTemplateList[2].parent.profileFields[0].final_value|replace:'|':'<br>'}
                            </h3>
                        </div>
                    </div>
                    <div class="col-lg-13">
                        {if $element.contentElements.ContentTemplateList[2].scions|count>0}
                        <div class="section-count__right">
                            <div class="swiper swiper-container" id="countCarousel">
                                <div class="swiper-wrapper">
                                    {foreach $element.contentElements.ContentTemplateList[2].scions as $item}
                                    <div class="swiper-slide">
                                        <div class="section-count__slide">
                                            <div data-value="{$item.profileFields[1].final_value}">{$item.profileFields[1].final_value}</div>
                                            <p>{$item.profileFields[2].final_value|replace:'|':'<br>'}</p>
                                        </div>
                                    </div>
                                    {/foreach}
                                </div>
                            </div>
                        </div>
                        {/if}
                    </div>
                </div>
            </div>
        </section>
        {/if}

        {if $element.contentElements.ContentTemplateList[3].parent.name}
        <section class="section-reference">
            <div class="section-reference__bg" id="referenceBg" style="background-image: url({$templates_dir}gfx/background-default.jpg)"></div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-13 offset-lg-8">
                        <div class="section-reference__content">
                            <div class="section-reference__top">
                                <h4 class="section-reference__heading">
                                    {$element.contentElements.ContentTemplateList[3].parent.profileFields[0].final_value|replace:'|':'<br>'}
                                </h4>
                                <div class="section-reference__lead">
                                    {$element.contentElements.ContentTemplateList[3].parent.profileFields[1].final_value|nl2br}
                                </div>
                            </div>
                            {if $element.contentElements.ContentTemplateList[3].scions|count>0}
                            <div class="section-reference__bottom">
                                <div class="swiper swiper-container" id="referenceCarousel">
                                    <div class="swiper-wrapper">
                                        {foreach $element.contentElements.ContentTemplateList[3].scions as $item}
                                        <div class="swiper-slide">
                                            <div class="slide-reference">
                                                <div class="slide-reference__left">
                                                    <span>{$item.profileFields[2].final_value|replace:'|':'<br>'}</span>
                                                    {$item.profileFields[3].final_value}

                                                    {if $item.attachmentList|count>0}
                                                        <a href="javascript:void();" onclick="xajax_exe('PageModule-xajaxDownloadAttachment', '{CMSString::encode($item.id)}', 'attachmentList');" class="btn btn--box-primary">{'section_reference_attachment'|translate}</a>
                                                    {/if}
                                                </div>
                                                {if $item.mainImageFilename}
                                                <div class="slide-reference__right">
                                                    <img src="{image f=$item.mainImageFilename w=208 m=nc return='path'}" alt="{$item.mainImageAlt}">{*208x79*}
                                                </div>
                                                {/if}
                                            </div>
                                        </div>
                                        {/foreach}
                                    </div>

                                    {*
                                        <div class="swiper-pagination-nav section-reference__pagination">
                                                <div class="swiper-pagination"></div>
                                        </div>
                                    *}
 
                                    {if $element.contentElements.ContentTemplateList[3].scions|count>1}
                                    <div class="swiper-navigation-arrow section-reference__arrow">
                                        <div class="swiper-button-prev"></div>
                                        <div class="swiper-button-next"></div>
                                    </div>
                                    {/if}

                                </div>
                            </div>
                            {/if}
                        </div>
                    </div>
                </div>
            </div>
        </section>
        {/if}

    </div>

{include file="includes/sections/section-news.html"}

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

</div>
{/block}

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