{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">


    <section class="section-banner">
        <div class="swiper swiper-banner" id="swiperBanner">
            <div class="swiper-wrapper">
                {foreach $banerHomepageTop as $item}
                {if !empty($item.redirect)}<a href="{$item.redirect}" target="{$item.target}"
                    class="swiper-slide swiper-banner__slide">{else}<div class="swiper-slide swiper-banner__slide">{/if}
                        <div class="swiper-banner__showcase">
                            {$item.content}
                        </div>
                        <picture>
                            {*
                            <source media="(min-width:650px)" srcset="{$templates_dir}img/banner_1920_905.jpg">
                            <source media="(min-width:465px)" srcset="{$templates_dir}img/banner_1920_905.jpg">
                            *}
                            <img src="{image f=$item.mainImageFilename w=1920 h=905 m=cr r=path}"
                                alt="{$item.mainImageAlt}" class="img-cover" width="1920" height="905">
                        </picture>
                        {if !empty($item.redirect)}</a>{else}</div>{/if}
            {/foreach}
        </div>
        {if count($banerHomepageTop)>1}<div class="swiper-pagination"></div>{/if}
</div>
</section>

<div class="wrapper wrapper-gray" id="sectionAbout">
    <section class="section-about-us">
        <div class="section-about-us__img">
            <img src="{$templates_dir}img/MAP_v2_596_525.png" alt="" width="596" height="525">
        </div>
        <div class="section-about-us__text">
            <h2 class="heading">{$indexFields.homepage_about_title|stripslashes|nl2br}</h2>
            <h4>{$indexFields.homepage_about_header|stripslashes|nl2br}</h4>
            {$indexFields.homepage_about_content|stripslashes}
        </div>
    </section>
    <section class="section-history">
        <div class="section-history__top">
            <div class="left">
                <h2 class="heading">{$indexFields.homepage_history_title|stripslashes|nl2br}</h2>
            </div>
            <div class="right">
                <p>{$indexFields.homepage_history_header|stripslashes|nl2br}</p>
            </div>
            <div class="navigation">
                <div class="swiper-pagination"
                    data-pagination="{foreach $timelineList as $item}{$item.name}{if !$item@last},{/if}{/foreach}">
                </div>
            </div>
        </div>
        <div class="swiper-history">
            <div class="swiper">
                <div class="swiper-wrapper">
                    {foreach $timelineList as $item}
                    <div class="swiper-slide">
                        <div class="slide-history">
                            <div class="slide-history__left" {if empty($item.mainImageFilename)} style="width: 100%"
                                {/if}>
                                <span class="mobile-date">{$item.name}</span>
                                <h4>{$item.title|stripslashes}</h4>
                                <p>{$item.content|stripslashes|nl2br}</p>
                            </div>
                            {if !empty($item.mainImageFilename)}
                            <div class="slide-history__right">
                                <img src="{image f=$item.mainImageFilename w=921 h=520 m=cr r=path}" alt="" width="921"
                                    height="520" class="img-cover">
                            </div>
                            {/if}
                        </div>
                    </div>
                    {/foreach}
                </div>
                <div class="swiper-button-prev swiper-button-prev--orange"></div>
                <div class="swiper-button-next swiper-button-next--orange"></div>
            </div>
        </div>
    </section>
</div>

<div class="wrapper">
    <section class="section-companies">
        <div class="section-companies__top">
            <div class="left">
                <h2 class="heading">{$indexFields.homepage_structure_title|stripslashes|nl2br}</h2>
            </div>
            <div class="right">
                <p>{$indexFields.homepage_about_header|stripslashes|nl2br}</p>
            </div>
        </div>
        {if !empty($indexFields.homepage_structure_image)}
        <div class="diagram">
            <img src="{image f=$indexFields.homepage_structure_image[0].filename w=1571 h=540 m=cr r=path}" alt=""
                width="1571" height="540">
        </div>
        {/if}
    </section>
    <section class="section-diagram">
        <article class="left">
            <h2 class="heading">{$indexFields.homepage_shareholding_title|stripslashes|nl2br}</h2>
            {if !empty($indexFields.homepage_shareholding_image)}
            <div class="diagram">
                <img src="{image f=$indexFields.homepage_shareholding_image[0].filename w=613 h=236 m=cr r=path}" alt=""
                    width="613" height="236">
            </div>
            {/if}
        </article>
        <article class="right">
            <h2 class="heading">{$indexFields.homepage_officers_title|stripslashes|nl2br}</h2>
            <div class="table">
                {foreach $teamCategoryList as $tcl}
                <div class="table-th">
                    {$tcl.name|stripslashes}
                </div>
                <div class="table-td">
                    {foreach $teamList as $tl}
                    {if $tl.id_category==$tcl.id}
                    <div>
                        <p>{$tl.name}</p>
                        <p>{$tl.occupation|stripslashes}</p>
                    </div>
                    {/if}
                    {/foreach}
                </div>
                {/foreach}
            </div>
        </article>
    </section>
    {if !empty($blogList)}
    <section class="section-news">
        <div class="left">
            <h2 class="heading">{$indexFields.homepage_news_title|stripslashes}</h2>
            {if count($blogList)>3}<a href="" class="btn btn-toggle" data-text-all="{'label_blog_all'|translate}"
                data-text-less="{'label_blog_less'|translate}">{'label_blog_all'|translate}</a>{/if}
        </div>
        <div class="right">
            {* ma być 9, 3 od razu pokazane kolejne 6 będę odkrywał*}
            {foreach $blogList as $item}
            <article>
                <time datetime="{$item.noticed_at}"><span>{date('j', strtotime($item.noticed_at))}</span>{date('m.Y',
                    strtotime($item.noticed_at))}</time>
                <h2>{$item.name|stripslashes}</h2>
                <p>{$item.name|stripslashes|nl2br}</p>
                {if !empty($item.content)}<a href="{seoLink id_element=$item.id}"
                    class="btn">{'label_blog_more'|translate}</a>{/if}
            </article>
            {/foreach}
        </div>
    </section>
    {/if}

    <section class="section-map">
        <div id="map" style="width: 100%; height: 100%;" data-lat="{Core::getSetting('latitude_google')}"
            data-long="{Core::getSetting('longitude_google')}"></div>
    </section>
</div>

</div>
{/block}

{block name="scripts"}
<script src="{$templates_dir}js/page-home.min.js?{$global_version}"></script>
<script
    src="https://maps.google.com/maps/api/js?v=quarterly&language={Core::getLanguageCode()}&libraries=geometry%2Cplaces%2Cvisualization&key={Core::getSetting('google_maps_api_key')}">
    </script>
<script src="{$templates_dir}js/map-contact.js"></script>
{/block}