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

  {include file="includes/sections/section-banner.html" banner=$BannerTop}

  {if $menuCategoryList|count>0}
    <section class="section-created">
        <h2 class="heading section-created__heading">{'general_section_category'|translate}</h2>
        <div class="swiper swiper-container" id="createdCarousel">
          <div class="swiper-wrapper">
            {foreach $menuCategoryList as $item}
                {if $item.is_marked==1}
                <div class="swiper-slide">
                  <img src="{image f=$item.mainImageFilename w=1000 h=666 m=cr return='path'}" alt="{$item.mainImageAlt}" class="img-cover">
                  <h3>{$item.name}</h3>
                  <a href="{$menuCategoryURLList[ $item.id ]}">{'general_more'|translate}</a>
                </div>
                {/if}
            {/foreach}
          </div>
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>
        <span class="left-0 left-overlay slider-overlay"></span>
        <span class="right-0 right-overlay slider-overlay"></span>
        {foreach $menuCategoryList as $item}
            {if $item.is_marked==1}
                <div class="swiper-slide-heading">
                  <h3 class="heading-md">{$item.name}</h3>
                  <a href="{$menuCategoryURLList[ $item.id ]}" class="btn">{'general_more'|translate}</a>
                </div>
                {break}
            {/if}
        {/foreach}
        <div class="swiper-pagination"></div>
    </section>
  {/if}

  {if $PressroomList|count>0}
    <section class="section-archives">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <div class="section-archives__header">
              <h3 class="heading">{'general_section_pressroom'|translate}</h3>
              <a href="{seoLink id_element=1692 withParents=1}" class="btn">{'label_archive'|translate}</a>
            </div>
            <div class="swiper" id="archivesCarousel">
              <div class="swiper-wrapper">
                {foreach $PressroomList as $item}
                    {if !empty($item.link_redirect)}
                        {capture assign=itemLink}{$item.link_redirect}{/capture}
                    {else}
                        {capture assign=itemLink}{seoLink id_element=$item.id parentLink="{seoParentLink module='PressroomModule'}"}{/capture}
                    {/if}
                    <div class="swiper-slide">
                      <article class="archives-article">
                        <h2 class="heading-md archives-article__heading">
                          {$item.name} <time datetime="{$item.noticed_at}">{$item.noticed_at_v2}</time>
                        </h2>
                        <div class="lead archives-article__lead">
                          {$item.short_content|nl2br}
                        </div>
                        <a href="{$itemLink}" class="btn">{if !empty($item.link_redirect)}{$item.link_title}{else}{'general_read_more'|translate}{/if}</a>
                      </article>
                    </div>
                {/foreach}
              </div>

              {if $PressroomList|count>1}
                <div class="swiper-pagination"></div>
              {/if}

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

  {if $Products|count>0}
  <section class="section-productNews">
    <div class="container">
      <div class="row">
        <div class="col-lg-10 mx-auto">

          <div class="section-productNews__header">
            <h2 class="heading">{'general_section_product_new'|translate}</h2>
          </div>

          <div class="swiper" id="productNewsCarousel">
            <div class="swiper-wrapper">
              {foreach $Products as $item}
              <div class="swiper-slide">
                {include file="includes/components/product-item.html" product=$item}
              </div>
              {/foreach}
            </div>
            <div class="swiper-pagination swiper-pagination--white swiper-pagination--relative"></div>
          </div>

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


  <section class="section-factory">
    <div class="container">
      <div class="row">

        {if $element.contentElements.ContentTemplateList[0].parent.name}
            {assign var=SectionData value=$element.contentElements.ContentTemplateList[0]}
            <div class="col-lg-12 col-xxl-10 mx-auto">
              <div class="section-factory__content">
                {if $SectionData.parent.image2List|count>0}
                    {foreach $SectionData.parent.image2List as $item}
                        <img src="{image f=$item.filename w=242 h=242 m=cr return='path'}" alt="{$item.alt}" class="circle" id="factoryCircle">
                        {break}
                    {/foreach}
                {/if}

                <div class="section-factory__left">
                    {if $SectionData.parent.mainImageFilename}
                    <img src="{image f=$SectionData.parent.mainImageFilename w=930 h=650 m=cr return='path'}" alt="{$SectionData.parent.mainImageAlt}" class="img-cover">
                    {/if}
                </div>
                <div class="section-factory__right">
                  <h2 class="heading">{$SectionData.parent.profileFields[0][0].final_value|nl2br}</h2>
                  <div class="lead">
                        {$SectionData.parent.profileFields[1][0].final_value|show_images}
                  </div>
                  <div class="buttons">
                      {$SectionData.parent.profileFields[2][0].final_value}
                  </div>
                </div>
              </div>
            </div>
        {/if}

        {if $element.contentElements.ContentTemplateList[1].parent.name}
            {assign var=SectionData value=$element.contentElements.ContentTemplateList[1]}
            <div class="col-lg-12 col-xxl-10 mx-auto">
              <div class="furniture-department">
                <div class="furniture-department__left">
                  <h3 class="heading-md">{$SectionData.parent.profileFields[0][0].final_value|nl2br}</h3>
                  <div class="lead">
                      {$SectionData.parent.profileFields[1][0].final_value|show_images}
                  </div>
                  {$SectionData.parent.profileFields[2][0].final_value}
                </div>
                {if $SectionData.parent.imageList|count>0}
                <div class="furniture-department__right">
                  <div class="swiper furniture-carousel" id="furnitureCarousel">
                    <div class="swiper-wrapper">
                      {foreach $SectionData.parent.imageList as $item}
                      <div class="swiper-slide">
                        <img src="{image f=$item.filename w=450 h=450 m=cr return='path'}" alt="{$item.alt}" class="img-cover">
                      </div>
                      {/foreach}
                    </div>
                    <div class="swiper-pagination swiper-pagination--relative"></div>
                  </div>
                </div>
                {/if}
              </div>
            </div>
        {/if}

      </div>
    </div>
  </section>

  {if $element.contentElements.ContentTemplateList[2].parent.name}
    {assign var=SectionData value=$element.contentElements.ContentTemplateList[2]}
    <section class="section-newsletter" data-newsletter>
      {if $SectionData.parent.mainImageFilename}
        <img src="{image f=$SectionData.parent.mainImageFilename w=1910 h=704 m=cr return='path'}" alt="{$SectionData.parent.mainImageAlt}" class="img-cover bg">
      {/if}
      <div class="box-newsletter" data-newsletter>
        <h2 class="heading-md">{'newsletter_form_header'|translate}</h2>
        <p class="lead">{'newsletter_form_subheader'|translate}</p>
        <div class="box-newsletter__form">
          <input type="text" placeholder="{'newsletter_input_placeholder'|translate}">
          <a href="">
            <img src="{$templates_dir}gfx/swiper-arrow-white.png" alt="{'newsletter_form_submit'|translate}">
          </a>
        </div>
      </div>
    </section>
  {/if}

  {include file="includes/sections/section-blog.html" blogData=$BlogList sectionLabel='product_section_blog'|translate}

  {if $element.contentElements.ContentTemplateList[3].parent.name}
    {assign var=SectionData value=$element.contentElements.ContentTemplateList[3]}

    {if $inspirationList|count>0}
        <section class="section-inspired">
            <div class="container">
                <div class="row">
                    <div class="col-lg-10 mx-auto">
                        <div class="section-inspired__header">
                            <h2 class="heading">{$SectionData.parent.profileFields[0][0].final_value}</h2>
                            <a href="{seoLink id_element=11314 withParents=1}" class="btn">{'label_archive_inspiration'|translate}</a>
                        </div>
                        <div class="swiper" id="inspiredCarousel">
                            <div class="swiper-wrapper">
                                {foreach $inspirationList as $item}
                                <div class="swiper-slide">
                                    <a href="{seoLink id_element=$item.id parentLink="{seoParentLink module='InspirationModule'}"}">
                                        <img src="{image f=$item.mainImageFilename w=450 h=450 m=cr return='path'}" alt="{$item.mainImageAlt}" class="img-cover">
                                    </a>
                                </div>
                                {/foreach}
                            </div>
                            <div class="swiper-pagination swiper-pagination--relative"></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    {/if}

    {if !empty($socialMedia)}
        <section class="section-socials">
          <div class="container">
            <div class="row">
              <div class="col-lg-10 mx-auto">
                <div class="socials-box">
                  <h2 class="heading">{$SectionData.parent.profileFields[1][0].final_value}</h2>
                  <p class="lead">{$SectionData.parent.profileFields[2][0].final_value}</p>
                  <div class="buttons">
                    {if isset($socialMedia.fb)}
                        <a href="{$socialMedia.fb}" target='_blank'>
                          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12px" height="20px">
                            <path fill-rule="evenodd" fill="rgb(0, 27, 51)" d="M7.636,19.998 L7.636,10.874 L10.880,10.874 L11.366,7.319 L7.636,7.319 L7.636,5.49 C7.636,4.21 7.940,3.318 9.503,3.318 L11.497,3.318 L11.497,0.138 C11.152,0.95 9.969,0.2 8.591,0.2 C5.716,0.2 3.748,1.654 3.748,4.697 L3.748,7.319 L0.497,7.319 L0.497,10.874 L3.748,10.874 L3.748,19.998 L7.636,19.998 Z" />
                          </svg>
                        </a>
                    {/if}
                    {if isset($socialMedia.yt)}
                        <a href="{$socialMedia.yt}" target='_blank'>
                          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="18px">
                            <path fill-rule="evenodd" fill="rgb(0, 27, 51)" d="M23.756,4.164 C23.756,4.164 23.523,2.499 22.804,1.766 C21.890,0.803 20.868,0.798 20.398,0.742 C17.41,0.497 12.3,0.497 12.3,0.497 L11.992,0.497 C11.992,0.497 6.954,0.497 3.596,0.742 C3.127,0.798 2.103,0.803 1.190,1.766 C0.471,2.499 0.237,4.164 0.237,4.164 C0.237,4.164 0.2,6.121 0.2,8.76 L0.2,9.911 C0.2,11.866 0.237,13.822 0.237,13.822 C0.237,13.822 0.471,15.488 1.190,16.221 C2.103,17.184 3.303,17.154 3.836,17.254 C5.757,17.440 11.997,17.498 11.997,17.498 C11.997,17.498 17.41,17.489 20.398,17.245 C20.868,17.189 21.890,17.184 22.804,16.221 C23.523,15.488 23.756,13.822 23.756,13.822 C23.756,13.822 23.997,11.866 23.997,9.911 L23.997,8.76 C23.997,6.121 23.756,4.164 23.756,4.164 ZM9.519,12.133 L9.518,5.342 L16.3,8.748 L9.519,12.133 Z" />
                          </svg>
                        </a>
                    {/if}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
    {/if}
  {/if}


</div>
{/block}

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