{block name='productdetails-product-images-modal'}
    {$lazyLoadImages=$lazyLoadImages|default:true}
    {et_getGlobalSettings assign="etGlobalSettings"}
    {et_isShopVersionAtLeast value="5.5.0-rc.1" assign='shopIsAtLeast55'}
    <div class="modal modal-fullview fade" id="productImagesModal" tabindex="-1" role="dialog" aria-label="{if $shopIsAtLeast55}{lang section='aria' key='imageZoom'}{else}image zoom{/if}" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                {block name='productdetails-product-images-modal-header'}
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="{if $shopIsAtLeast55}{lang section='aria' key='close'}{else}Close{/if}">
                            <i class="{et_getIcon key="close"}"></i>
                        </button>
                    </div>
                {/block}
                {block name='productdetails-product-images-modal-body'}
                    <div class="modal-body">
                        {foreach $images as $image}
                            {block name='productdetails-product-images-modal-image'}
                                <div class="{if empty($etGlobalSettings.freeAspectRatioImagesEnabled)}square square-image{/if}">
                                    <div class="inner">
                                        {image alt=$image->cAltAttribut
                                            class="product-image"
                                            fluid=true
                                            lazy=$lazyLoadImages
                                            webp=true
                                            width="{if !empty($image->imageSizes->lg->size->width)}{$image->imageSizes->lg->size->width}{/if}"
                                            height="{if !empty($image->imageSizes->lg->size->height)}{$image->imageSizes->lg->size->height}{/if}"
                                            src="{$Artikel->Bilder[0]->cURLNormal}"
                                            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"
                                            sizes="auto"
                                            data=["list"=>"{$image->galleryJSON|escape:"html"}", "index"=>$image@index]
                                        }
                                    </div>
                                </div>
                            {/block}
                        {/foreach}
                    </div>
                {/block}
            </div>
        </div>
    </div>
{/block}
