<div class="product-gallery" data-gallery-wrapper>
   <div class="product-photo-main">
       {include "product/product.ajax.tpl" product=$unifiedProduct hide_first_part=1 hide_second_part=1 hide_sticky_info=1}
   </div>

   {if $body.product.photos}
      {if $body.product.links}
         {foreach $body.product.links as $link}
            {if $link.type == 'youtube'}
               {$video_links[] = $link}
            {/if}
         {/foreach}
      {/if}

      {get_znz_product_photos product=$body.product assign='znzProductPhotos'}

      {$visible_photos = 4}
      {if $znzProductPhotos|count > 4}
         {$visible_photos = 3}
         {$hidden_photos = $znzProductPhotos|count - $visible_photos}
      {/if}

      {if $video_links|count > 0}
         {$visible_photos = $visible_photos - 1}
         {$hidden_photos = $hidden_photos - 1}
      {/if}

      <div class="product-gallery-photos">
         {foreach $znzProductPhotos|array_reverse as $photo}
            {$photo_dimensions = $cfg.Photo.types["product_gallery"].size}
            {$photo_src = {get_photo photo=$photo size='product_gallery'}}
            {$photo_descr = {$photo.descr|default:$body.product.title}}
            {if $photo.variationTitle}
                {$photo_descr = "{$photo_descr} - {$photo.variationTitle}"}
            {/if}

            {if $photo@iteration <= $visible_photos}
               <div class="product-gallery-item">
                  <a href="{get_photo photo=$photo size=0}" data-rel="gallery">
                     <img src="{$photo_src}"
                          alt="{$photo_descr}"
                          width="{$photo_dimensions[0]}" height="{$photo_dimensions[1]}"
                          class="img-fluid">
                  </a>
               </div>
            {elseif $photo@iteration == ($visible_photos + 1) && $hidden_photos > 0}
               <div class="product-gallery-item more-photos">
                  <a href="{get_photo photo=$photo size=0}" data-rel="gallery">
                     <img src="{$photo_src}" alt="{$photo_descr}" class="hidden img-fluid" loading="lazy">
                     <i class="fc icons_image"></i>
                     <span>+&nbsp;{$hidden_photos}&nbsp;{t plural="další" plural5="dalších" count=$hidden_photos}další{/t}</span>
                  </a>
               </div>
            {else}
               <div class="product-gallery-item hidden">
                  <a href="{get_photo photo=$photo size=0}" data-rel="gallery">
                     <img src="{$photo_src}" alt="{$photo_descr}" class="img-fluid" loading="lazy">
                  </a>
               </div>
            {/if}
         {/foreach}

         {if $video_links|count > 0}
            {$video_link = $video_links[0].link|replace:'watch?v=':'embed/'}
            <div class="product-gallery-item product-gallery-video">
               <a href="{$video_link}" data-rel="gallery" data-type="video">
                  <i class="fc icons_video"></i>
                  <span>{t}Video{/t}</span>
               </a>
            </div>
         {/if}
      </div>
   {/if}
</div>
