{* Set Default Thumb Position if none is provided *}
{if !isset($thumbsPosition)}
    {assign var="thumbsPosition" value="bottom"}
{/if}

{$lazyLoadImages=$lazyLoadImages|default:true}
{et_getGlobalSettings assign="etGlobalSettings"}
{et_isShopVersionAtLeast value="5.5.0-rc.1" assign='shopIsAtLeast55'}

{block name='productdetails-image'}
    <div id="image_wrapper" class="gallery-with-action" role="group">
        <div class="row gallery-with-action-main">
            {* Close Image Modal Button *}
            {block name='productdetails-image-button'}
                <div class="col col-12 product-detail-image-topbar">
                    <button type="button" id="image_fullscreen_close" class="btn btn-link" aria-label="{if $shopIsAtLeast55}{lang section='aria' key='close'}{else}Close{/if}">
                        <i class="{et_getIcon key="close"}"></i>
                    </button>
                </div>
            {/block}

            {* Main Image Gallery *}
            {block name='productdetails-image-main'}
                {if is_array($Artikel->Bilder)}
                    {$imageCount = count($Artikel->Bilder)}
                {else}
                    {$imageCount = 0}
                {/if}
                {$imageCountDefault = 5}

                {if isset($Artikel->FunktionsAttribute['youtube_id']) || isset($Artikel->FunktionsAttribute['youtube_thumbnail'])}
                    {$imageCount = $imageCount + 1}
                {/if}

                {* Vertical Thumbs, either on left or ride side of the image *}
                {if $thumbsPosition === 'left' || $thumbsPosition === 'right'}
                    {block name='productdetails-image-preview-vertical'}
                        {if $imageCount > 1}
                            <div class='col col-3 col-sm-2 et-gallery-thumbs et-gallery-thumbs-vertical product-detail-image-preview-bar'>
                                <div id="gallery_preview_wrapper" class="product-thumbnails-wrapper">
                                    {* Slider Prev Arrow *}
                                    {block name='productdetails-image-preview-vertical-slider-prev'}
                                        {if $imageCount > $imageCountDefault}
                                            <div class="et-slider-nav">
                                                <div class="et-slider-nav-prev enabled slick-arrow slick-hidden">
                                                    <i class="{et_getIcon key='sliderUp'}"></i>
                                                </div>
                                            </div>
                                        {/if}
                                    {/block}

                                    {* Thumbs Slider, Acts as nav for main image *}
                                    {block name='productdetails-image-preview-vertical-slider'}
                                        <div id="gallery_preview"
                                            class="product-thumbnails slick-smooth-loading carousel carousel-thumbnails slick-lazy {if $imageCount <= $imageCountDefault}slick-count-default{/if}"
                                            data-slick='{strip}{block name='productdetails-image-preview-vertical-slick-config'}{
                                                "vertical":        true,
                                                "verticalSwiping": true,
                                                "adaptiveHeight":  true,
                                                "lazyLoad":        "ondemand",
                                                "slidesToShow":    {if $imageCountDefault > 0}{$imageCountDefault}{else}1{/if},
                                                "slidesToScroll":  1,
                                                "asNavFor":        "#gallery",
                                                "dots":            false,
                                                "focusOnSelect":   true,
                                                "prevArrow": ".product-detail-image-preview-bar .et-slider-nav-prev",
                                                "nextArrow": ".product-detail-image-preview-bar .et-slider-nav-next"
                                            }{/block}{/strip}'
                                        >
                                            {block name='productdetails-image-preview-vertical-images'}
                                                {foreach $Artikel->Bilder as $image}
                                                    {strip}
                                                    <div class="{if empty($etGlobalSettings.freeAspectRatioImagesEnabled)}square square-image {/if}js-gallery-images
                                                        {if $image@first} preview-first{/if}"{if $image@index >= $imageCountDefault} style="display:none;"{/if}
                                                    >
                                                        <div class="inner">
                                                            {image alt=$image->cAltAttribut
                                                                class="product-image"
                                                                fluid=true
                                                                lazy=$lazyLoadImages
                                                                webp=true
                                                                src="{$image->cURLKlein}"
                                                                width={$Einstellungen.bilder.bilder_artikel_klein_breite}
                                                                height={$Einstellungen.bilder.bilder_artikel_klein_hoehe}
                                                            }
                                                        </div>
                                                    </div>
                                                    {/strip}
                                                {/foreach}
                                            {/block}

                                            {* Tab Control, ie. show tab and scroll to it *}
                                            {if isset($Artikel->FunktionsAttribute['youtube_id']) || isset($Artikel->FunktionsAttribute['youtube_thumbnail'])}
                                                {block name="productdetails-image-preview-vertical-youtube"}
                                                    <div class="{if empty($etGlobalSettings.freeAspectRatioImagesEnabled)}square square-image {/if}js-gallery-images youtube-thumbnail">
                                                        <div class="inner">
                                                            <a href="#tab-video" data-tab-control="true">
                                                                <i class="play-icon fab fa-youtube"></i>

                                                                {block name="productdetails-image-preview-vertical-youtube-thumbnail"}
                                                                    {if isset($Artikel->FunktionsAttribute['youtube_thumbnail'])}
                                                                        <img
                                                                            src="{$Artikel->FunktionsAttribute['youtube_thumbnail']|escape:"html"}"
                                                                            alt="{lang key='tabVideo' section='media'}"{if $lazyLoadImages} loading="lazy"{/if}
                                                                        />
                                                                    {else}
                                                                        <img
                                                                            src="https://img.youtube.com/vi/{$Artikel->FunktionsAttribute['youtube_id']|escape:"html"}/default.jpg"
                                                                            alt="{lang key='tabVideo' section='media'}"{if $lazyLoadImages} loading="lazy"{/if}
                                                                        />
                                                                    {/if}
                                                                {/block}
                                                            </a>
                                                        </div>
                                                    </div>
                                                {/block}
                                            {/if}
                                        </div>
                                    {/block}

                                    {* Slider Next Arrow *}
                                    {block name='productdetails-image-preview-vertical-slider-next'}
                                        {if $imageCount > $imageCountDefault}
                                            <div class="et-slider-nav">
                                                <div class="et-slider-nav-next enabled slick-arrow slick-hidden">
                                                    <i class="{et_getIcon key='sliderDown'}"></i>
                                                </div>
                                            </div>
                                        {/if}
                                    {/block}
                                </div>
                            </div>
                        {/if}
                    {/block}
                {/if}

                {* Main Image Gallery Slider *}
                {block name='productdetails-image-images-wrapper'}
                    <div id="gallery_wrapper" class="{strip}{block name='productdetails-image-images-wrapper-classes'}
                        col mx-auto et-gallery-slider {if $imageCount > 1 && ($thumbsPosition === 'left' || $thumbsPosition === 'right')}col-7 col-lg-10{else}col-8 col-lg-12{/if} clearfix
                    {/block}{/strip}">
                        {if !($Artikel->nIstVater && $Artikel->kVaterArtikel == 0)}
                            {* Product Actions, Notelist, Comparelist *}
                            {block name='productdetails-image-actions'}
                                <div class="product-actions" data-toggle="product-actions">
                                    {* Compare List *}
                                    {if $Einstellungen.artikeldetails.artikeldetails_vergleichsliste_anzeigen === 'Y'
                                    && $Einstellungen.vergleichsliste.vergleichsliste_anzeigen === 'Y'}
                                        {block name='productdetails-image-include-comparelist-button'}
                                            {include file='snippets/comparelist_button.tpl'}
                                        {/block}
                                    {/if}

                                    {* Wishlist *}
                                    {if $Einstellungen.global.global_wunschliste_anzeigen === 'Y'}
                                        {block name='productdetails-image-include-wishlist-button'}
                                            {include file='snippets/wishlist_button.tpl'}
                                        {/block}
                                    {/if}
                                </div>
                            {/block}
                        {/if}
                        {if count($Artikel->Bilder) > 1 && $thumbsPosition === 'topBubbles'}
                            {block name="et-gallery-slider-dots-top"}
                                <div class="et-slider-top-nav" id="et-gallery-slider-dots-top"></div>
                            {/block}
                        {/if}
                        {block name="productdetails-image-images-gallery"}
                            <div id="gallery"
                                class="product-images slick-smooth-loading carousel slick-lazy"
                                data-slick='{block name="et-news-items-slick-config"}{
                                    "lazyLoad": "ondemand",
                                    "infinite": true,
                                    {if $thumbsPosition === 'topBubbles'}
                                        "dots": true,
                                        "appendDots": "#et-gallery-slider-dots-top",
                                    {elseif $thumbsPosition === 'bottomBubbles'}
                                        "dots": true,
                                        "appendDots": "#et-gallery-slider-dots-bottom",
                                    {else}
                                        "dots": false,
                                    {/if}
                                    "arrows":   false,
                                    "speed":    500,
                                    "fade":     true,
                                    {if in_array($thumbsPosition, ['top', 'right', 'bottom', 'left'])}"asNavFor": "#gallery_preview",{/if}
                                    "cssEase":  "linear"
                                }{/block}'
                            >
                                {block name='productdetails-image-images'}
                                    {foreach $Artikel->Bilder as $image}
                                        {strip}
                                            <div class="js-gallery-images">
                                                {image alt=$image->cAltAttribut
                                                    class="product-image"
                                                    fluid=true
                                                    lazy=$lazyLoadImages
                                                    webp=true
                                                    src="{$image->cURLMini}"
                                                    srcset="{$image->cURLMini} {$Einstellungen.bilder.bilder_artikel_mini_breite}w,
                                                        {$image->cURLKlein} {$Einstellungen.bilder.bilder_artikel_klein_breite}w,
                                                        {$image->cURLNormal} {$Einstellungen.bilder.bilder_artikel_normal_breite}w,
                                                        {$image->cURLGross} {$Einstellungen.bilder.bilder_artikel_gross_breite}w"
                                                    data=["list"=>"{$image->galleryJSON|escape:"html"}", "index"=>$image@index, "sizes"=>"auto"]
                                                    width={$Einstellungen.bilder.bilder_artikel_gross_breite}
                                                    height={$Einstellungen.bilder.bilder_artikel_gross_hoehe}
                                                }
                                            </div>
                                        {/strip}
                                    {/foreach}
                                {/block}
                            </div>
                        {/block}
                        {if count($Artikel->Bilder) > 1 && $thumbsPosition === 'bottomBubbles'}
                            {block name="et-gallery-slider-dots-bottom"}
                                <div class="et-slider-bottom-nav" id="et-gallery-slider-dots-bottom"></div>
                            {/block}
                        {/if}

                        {* Dot Navigation - Not used by default, but we keep it so that child themes can easily activate it with dots: true *}
                        {if count($Artikel->Bilder) > 1}
                            {block name='productdetails-image-images-dot-navigation'}
                                <ul class="slick-dots initial-slick-dots d-none" style="" role="tablist">
                                    {foreach $Artikel->Bilder as $image}
                                        <li class="{if $image@first}slick-active{/if}" role="presentation">
                                            <button class="btn"></button>
                                        </li>
                                    {/foreach}
                                </ul>
                            {/block}
                        {/if}
                    </div>
                {/block}
            {/block}

            {* Horizontal Thumbs, either above or below the main image gallery *}
            {if $thumbsPosition === 'top' || $thumbsPosition === 'bottom'}
                {block name='productdetails-image-preview-horizontal'}
                    {if $imageCount > 1}
                        <div class='col col-12 et-gallery-thumbs et-gallery-thumbs-horizontal product-detail-image-preview-bar'>
                            <div id="gallery_preview_wrapper" class="product-thumbnails-wrapper">
                                {block name='productdetails-image-preview-horizontal-slider-prev'}
                                    {if $imageCount > $imageCountDefault}
                                        <div class="et-slider-nav">
                                            <button type="button" class="et-slider-nav-prev enabled slick-arrow slick-hidden" id="et-gallery-slider-prev"{if $shopIsAtLeast55} aria-label="{lang section='aria' key='prev'}"{/if}>
                                                <i class="{et_getIcon key='sliderPrevious'}"></i>
                                            </button>
                                        </div>
                                    {/if}
                                {/block}

                                {block name='productdetails-image-preview-horizontal-slider'}
                                    <div id="gallery_preview"
                                        class="product-thumbnails slick-smooth-loading carousel carousel-thumbnails slick-lazy {if $imageCount <= $imageCountDefault}slick-count-default{/if}"
                                        data-slick='{strip}{block name='productdetails-image-preview-horizontal-slick-config'}{
                                            "nextArrow":      "#et-gallery-slider-next",
                                            "prevArrow":      "#et-gallery-slider-prev",
                                            "lazyLoad":       "ondemand",
                                            "slidesToShow":   {if $imageCountDefault > 0}{$imageCountDefault}{else}1{/if},
                                            "slidesToScroll": 1,
                                            "asNavFor":       "#gallery",
                                            "focusOnSelect":  true,
                                            "dots":           false
                                        }'{/block}{/strip}
                                    >

                                        {block name='productdetails-image-preview-horizontal-images'}
                                            {foreach $Artikel->Bilder as $image}
                                                {strip}
                                                <div class="{if empty($etGlobalSettings.freeAspectRatioImagesEnabled)}square square-image {/if}js-gallery-images
                                                    {if $image@first} preview-first{/if}"{if $image@index >= $imageCountDefault} style="display:none;"{/if}
                                                >
                                                    <div class="inner">
                                                        {image alt=$image->cAltAttribut|escape:'html'
                                                            class="product-image"
                                                            fluid=true
                                                            lazy=$lazyLoadImages
                                                            webp=true
                                                            src="{$image->cURLKlein}"
                                                            width={$Einstellungen.bilder.bilder_artikel_klein_breite}
                                                            height={$Einstellungen.bilder.bilder_artikel_klein_hoehe}
                                                        }
                                                    </div>
                                                </div>
                                                {/strip}
                                            {/foreach}
                                        {/block}

                                        {* Tab Control, ie. show tab and scroll to it *}
                                        {if isset($Artikel->FunktionsAttribute['youtube_id']) || isset($Artikel->FunktionsAttribute['youtube_thumbnail'])}
                                            {block name="productdetails-image-preview-horizontal-youtube"}
                                                <div class="{if empty($etGlobalSettings.freeAspectRatioImagesEnabled)}square square-image {/if}js-gallery-images youtube-thumbnail">
                                                    <div class="inner">
                                                        <a href="#tab-video" data-tab-control="true">
                                                            <i class="play-icon fab fa-youtube"></i>

                                                            {block name="productdetails-image-preview-horizontal-youtube-thumbnail"}
                                                                {if isset($Artikel->FunktionsAttribute['youtube_thumbnail'])}
                                                                    <img
                                                                        src="{$Artikel->FunktionsAttribute['youtube_thumbnail']|escape:"html"}"
                                                                        alt="{lang key='tabVideo' section='media'}"{if $lazyLoadImages} loading="lazy"{/if}
                                                                    />
                                                                {else}
                                                                    <img
                                                                        src="https://img.youtube.com/vi/{$Artikel->FunktionsAttribute['youtube_id']|escape:"html"}/default.jpg"
                                                                        alt="{lang key='tabVideo' section='media'}"{if $lazyLoadImages} loading="lazy"{/if}
                                                                    />
                                                                {/if}
                                                            {/block}
                                                        </a>
                                                    </div>
                                                </div>
                                            {/block}
                                        {/if}
                                    </div>
                                {/block}

                                {block name='productdetails-image-preview-horizontal-slider-next'}
                                    {if $imageCount > $imageCountDefault}
                                        <div class="et-slider-nav">
                                            <button type="button" class="et-slider-nav-next enabled slick-arrow slick-hidden" id="et-gallery-slider-next"{if $shopIsAtLeast55} aria-label="{lang section='aria' key='next'}"{/if}>
                                                <i class="{et_getIcon key='sliderNext'}"></i>
                                            </button>
                                        </div>
                                    {/if}
                                {/block}
                            </div>
                        </div>
                    {/if}
                {/block}
            {/if}
        </div>

        {* Meta Tags *}
        {block name='productdetails-image-meta'}
            {foreach $Artikel->Bilder as $image}
                <meta itemprop="image" content="{$image->cURLNormal}">
            {/foreach}
        {/block}

        {* Image Modal *}
        {block name='productdetails-image-include-product-images-modal'}
            {include file='productdetails/product_images_modal.tpl' images=$Artikel->Bilder lazyLoadImages=$lazyLoadImages}
        {/block}

        {* Vartion Image Preview *}
        {block name='productdetails-image-variation-preview'}
            {if !$isMobile && !empty($Artikel->Variationen)}
                {assign var=VariationsSource value='Variationen'}
                {if isset($ohneFreifeld) && $ohneFreifeld}
                    {assign var=VariationsSource value='VariationenOhneFreifeld'}
                {/if}
                {foreach name=Variationen from=$Artikel->$VariationsSource key=i item=Variation}
                    {foreach name=Variationswerte from=$Variation->Werte key=y item=Variationswert}
                        {if $Variationswert->getImage() !== null}
                            {block name='productdetails-image-variation-preview-inner'}
                                <div class="variation-image-preview d-none fade vt{$Variationswert->kEigenschaftWert}">
                                    {block name='productdetails-image-variation-preview-title'}
                                        {if $Variation->cTyp === 'IMGSWATCHES'}
                                            <div class="variation-image-preview-title">
                                                {$Variation->cName}: <span class="variation-image-preview-title-value">{$Variationswert->cName}</span>
                                            </div>
                                        {/if}
                                    {/block}
                                    {block name='productdetails-image-variation-preview-image'}
                                        {include file='snippets/image.tpl' item=$Variationswert sizes='100vw'}
                                    {/block}
                                </div>
                            {/block}
                        {/if}
                    {/foreach}
                {/foreach}
            {/if}
        {/block}
    </div>
{/block}
