{if $slider.images|count}
   <div class="home-slider-wrapper">
      <div class="home-slider{if $slider.images|count > 1} home-slider-tns{/if}">
         {foreach $slider.images as $image}
            <div class="home-slider-item{if $image.custom_data.overlay == 'Y'} has-overlay{/if}" data-tracking-view='{get_gtm_data type='ecommerce' method='PromotionImpression' encode=true data=['slider' => $slider, 'position' => $image@iteration]}'>
               <a{if $image.link} href="{$image.link}" data-tracking-click='{get_gtm_data encode=true type='ecommerce' method='PromotionClick' data=['slider' => $slider, 'slide' => $image, 'position' => $image@iteration]}'{/if}>
                  {$photo_dimensions = $cfg.Photo.types["slider_main"].size}
                  {if $image.photo.videoId}
                     {get_video id=$image.photo.videoId assign='video' resolution="720p"}
                     {if $video}
                       <div class="video-wrapper">
                          <video poster="{get_photo photo=$image.photo size='slider_main'}" loop="" autoplay="" muted="" class="video">
                             <source src="{$video.mp4}" type="video/mp4">
                          </video>
                       </div>
                     {/if}
                  {/if}

                  {if $image@iteration == 1}
                     <link rel="preload" href="{get_photo photo=$image.photo size='slider_main_sm' version="mobile"}" as="image" media="(max-width: 543px)">
                     <link rel="preload" href="{get_photo photo=$image.photo size='slider_main_md' version="tablet"}" as="image" media="(min-width: 544px) and (max-width: 991px)">
                     <link rel="preload" href="{get_photo photo=$image.photo size='slider_main' version="desktop"}" as="image" media="(min-width: 992px)">
                  {/if}
                  <picture>
                     <source srcset="{get_photo photo=$image.photo size='slider_main_sm' version="mobile"}" media="(max-width: 543px)">
                     <source srcset="{get_photo photo=$image.photo size='slider_main_md' version="tablet"}" media="(max-width: 991px)">
                     <img src="{get_photo photo=$image.photo size='slider_main' version="desktop"}" class="img-responsive" alt="" width="{$photo_dimensions[0]}"
                          height="{$photo_dimensions[1]}"{if $image@iteration > 1} loading="lazy"{/if}>
                  </picture>
                  <div class="content">
                     <div class="container">
                        {if $image.custom_data.flag}
                           <span class="flag flag-banner">{$image.custom_data.flag}</span>
                        {/if}
                        <p class="descr descr-{$image.custom_data.color}">{$image.description|nl2br nofilter}</p>
                         {if $image.custom_data.descr_alt}
                            <p class="descr descr-alt descr-{$image.custom_data.color_alt}">{$image.custom_data.descr_alt|nl2br nofilter}</p>
                         {/if}
                        {if $image.link}
                           <span class="btn btn-white">{$image.custom_data.btn|default:"{t}Prohlédnout{/t}"}</span>
                        {/if}
                     </div>
                  </div>
               </a>
            </div>
         {/foreach}
      </div>
      <div class="home-slider-nav-wrapper">
         <div class="container">
            <div id="home-slider-nav" class="tns-nav">
               {foreach $slider.images as $image}
                  <button data-gal-index="{$image@index}">{$image@iteration|string_format:"%02d"}</button>
               {/foreach}
            </div>
         </div>
      </div>
   </div>
{/if}
