{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="{image f=$item.mainImageFilename w=1920 h=900 m=cr r=path}">
                            <source media="(min-width:465px)"
                                srcset="{image f=$item.mainImageFilename w=1920 h=900 m=cr r=path}">
                            <img src="{image f=$item.mainImageFilename w=1920 h=900 m=cr r=path}"
                                alt="{$item.mainImageAlt}" class="img-cover" width="1920" height="900">
                        </picture>
                        {if !empty($item.redirect)}</a>{else}</div>{/if}
            {/foreach}
        </div>
        {if $banerHomepageTop|count>1}<div class="swiper-pagination"></div>{/if}
</div>
</section>
<div style="background-color: #f2f2f2">
    <div class="wrapper wrapper-gray">
        <section class="section-mission">
            <div class="section-mission__img">
                <img src="{$templates_dir}img/MAP_v2_596_525.png" alt="" width="596" height="525">
            </div>
            <div class="section-mission__text">
                <h2 class="heading">{$fields.homepage_mission_header}</h2>
                <h4>{$fields.homepage_mission_title|nl2br}</h4>
                {$fields.homepage_mission_content}
                <a href="{seoLink id_element=1596}#Mission" class="act-button">{'general_read_more'|translate}</a>
            </div>
        </section>
    </div>
</div>


<div class="wrapper">
    {if !empty($mainCategoryList)}
    <div class="section-category">
        <div class="section-category-top">
            <div class="left">
                <h2 class="heading">{$fields.homepage_categories_title|nl2br}</h2>
            </div>
            <div class="right">
                <p class="heading-md">{$fields.homepage_categories_header|nl2br}</p>
            </div>
        </div>
        <div class="section-category-content">
            {foreach $mainCategoryList as $mcl}
            <article class="item-category">
                <a href="{seoLink id_element=$mcl.id}" class="arrow"><img src="{$templates_dir}gfx/arrow_19_13.png"
                        alt="" width="19" height="13"></a>
                <img src="{image f=$mcl.mainImageFilename m=nc r=path}{*$mcl.mainImageFilename*}"
                    alt="{$mcl.mainImageAlt}" class="img-product">
                <h2 class="heading">{$mcl.header|nl2br}</h2>
                {if !empty($mcl.info)}<span class="category">{$mcl.info}</span>{/if}
                {if !empty($mcl.short_content)}<p>{$mcl.short_content|nl2br}</p>{/if}
            </article>
            {/foreach}

        </div>
    </div>
    {/if}
</div>
<div class="section-products">
    <div style="background-color: #f2f2f2">
        <div class="wrapper">
            <div class="section-products-top">
                <h2 class="heading">{$fields.homepage_products_title}</h2>
                <div class="nav-products" data-nav-products>
                    {* <a href="" data-ide="new">{'label_new_products'|translate}</a> *}
                    {foreach $mainCategoryList as $mcl}
                    <a href="" {if $mcl@first} class="active" {/if} data-ide="{$mcl.id}">{$mcl.name}</a>
                    {/foreach}
                </div>
            </div>
        </div>
    </div>
    <div class="wrapper">
        <div class="section-products-content" id="productsList">
            {include file="includes/home-products.html" elements=$mainProducts}
        </div>
    </div>

</div>

<div style="background-color: #f2f2f2">
    <div class="wrapper wrapper-gray">
        <section class="section-aboutUs">
            <div class="section-aboutUs__top">
                <div class="left">
                    <h2 class="heading">{$fields.homepage_about_title}</h2>
                </div>
                <div class="right">
                    <p class="heading-md">{$fields.homepage_about_content|nl2br}</p>
                </div>

            </div>
            <div class="section-aboutUs__bottom">
                <div class="boxes">
                    <div class="box">
                        <h5>{$fields.homepage_points_1_title}</h5>
                        <span>{$fields.homepage_points_1_subtitle}</span>
                    </div>
                    <div class="box">
                        <h5>{$fields.homepage_points_2_title}</h5>
                        <span>{$fields.homepage_points_2_subtitle}</span>
                    </div>
                    <div class="box">
                        <h5>{$fields.homepage_points_3_title}</h5>
                        <span>{$fields.homepage_points_3_subtitle}</span>
                    </div>
                    <div class="box">
                        <h5>{$fields.homepage_points_4_title}</h5>
                        <span>{$fields.homepage_points_4_subtitle}</span>
                    </div>
                </div>
            </div>
            <div class="section-aboutUs__carousel">
                <div class="swiper">
                    <div class="swiper-wrapper">
                        {foreach range(0, 0) as $item}
                        <div class="swiper-slide">
                            <article class="news">
                                <div class="news__img">
                                    {if !empty($fields.homepage_about_image)}
                                    <img src="{image f=$fields.homepage_about_image[0].filename w=947 h=520 m=cr r=path}"
                                        alt="" width="947" height="520" class="img-cover">
                                    {/if}
                                </div>
                                <div class="news__text">
                                    <h4>{$fields.homepage_about_image_title|nl2br}</h4>
                                    {$fields.homepage_about_image_content|nl2br}
                                </div>
                            </article>
                        </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>
<div class="wrapper">
    {include file="includes/news-list.html" elements=$blogList header=$blogParentName parentLink=$blogParentLink}
    {include file="includes/product-request.html"}
</div>

</div>
{/block}

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