{* This component overrides the default image.tpl from SCCs - it handles lazy loading differently *}
{et_isShopVersionAtLeast value="5.6.0-rc.2" assign='shopIsAtLeast56'}
{$rounded = ''}
{if $shopIsAtLeast56}
    {$hasWebPSupport = \JTL\Media\Image::hasWebPSupport()}
    {$hasAVIFSupport = \JTL\Media\Image::hasAVIFSupport()}
{else}
    {$hasWebPSupport = \JTL\Media\Image::hasWebPSupport()}
    {$hasAVIFSupport = false}
{/if}
{$useModernFormats = ($params.webp->getValue() === true && ($hasWebPSupport || $hasAVIFSupport))}
{if $params.rounded->getValue() !== false}
    {if $params.rounded->getValue() === true}
        {assign var=rounded value='rounded'}
    {else}
        {assign var=rounded value='rounded-'|cat:$params.rounded->getValue()}
    {/if}
{/if}
{$useGetImageSize=false}
{if !$params.height->hasValue() && !$params.width->hasValue()}
    {$useGetImageSize=true}
{/if}

{if $params.src->getValue() !== null && strpos($params.src->getValue(), 'keinBild.gif') !== false}
<img class="{$params.class->getValue()} {$rounded} {if $params.fluid->getValue() === true} img-fluid{/if} {if $params['fluid-grow']->getValue() === true} img-fluid w-100{/if}"
     {if $useGetImageSize}
        {et_getImageSize src=$params.src->getValue() assign='et_imageSize'}
        {if !empty($et_imageSize['attributes'])}{$et_imageSize['attributes']}{/if}
     {else}
         {if $params.height->hasValue() && intval($params.height->getValue()) > 0}height="{$params.height->getValue()}"{/if}
         {if $params.width->hasValue() && intval($params.width->getValue()) > 0}width="{$params.width->getValue()}"{/if}
         {if $params.sizes->hasValue() && $params.sizes->getValue() !== 'auto'}sizes="{$params.sizes->getValue()}"{/if}
     {/if}
     alt="{if $params.alt->hasValue()}{$params.alt->getValue()}{/if}"
     src="{$params.src->getValue()}"{if $params.lazy->getValue() === true} loading="lazy"{/if}>
{else}
    {*if an image contains CSS-class "lazyload" the js-lib "lazysize" changes srcset. therefor we check against "lazy" parameter.
    loading gif is set as source if "lazy" is active to save bandwidth.

    https://github.com/aFarkas/lazysizes#modern-transparent-srcset-pattern
    https://ivopetkov.com/b/lazy-load-responsive-images/
    *}
    {if $useModernFormats}
    <picture>
        {if $hasAVIFSupport}
            <source
            {if $params.srcset->hasValue()}
                srcset="{$params.srcset->getValue()|regex_replace:"/\.(?i)(jpg|jpeg|png|bmp) /":".avif "|regex_replace:"/\.(?i)(jpg|jpeg|png|bmp)/":".avif"}"
            {elseif $src !== ''}
                srcset="{$src|regex_replace:'/\.(?i)(jpg|jpeg|png|bmp)$/':".avif"}"
            {else}
                srcset=""
            {/if}
            {if $params.sizes->hasValue()}sizes="{$params.sizes->getValue()}"{/if}
            type="image/avif">
        {/if}
        {if $hasWebPSupport}
            <source
            {if $params.srcset->hasValue()}
                srcset="{$params.srcset->getValue()|regex_replace:"/\.(?i)(jpg|jpeg|png|bmp) /":".webp "|regex_replace:"/\.(?i)(jpg|jpeg|png|bmp)/":".webp"}"
            {else}
                srcset="{$params.src->getValue()|regex_replace:"/\.(?i)(jpg|jpeg|png|bmp)/":".webp"}"
            {/if}
            {if $params.sizes->hasValue()}{if $params.sizes->getValue() !== 'auto'}sizes="{$params.sizes->getValue()}"{/if}{/if}
            type="image/webp">
        {/if}
    {/if}
        <img
            src="{$params.src->getValue()}"
            {if $params.lazy->getValue() === true}
                loading="lazy"
            {/if}
            {if $params.srcset->hasValue()}
                srcset="{$params.srcset->getValue()}"
            {/if}
            {if $params.sizes->hasValue()}{if $params.sizes->getValue() !== 'auto'}sizes="{$params.sizes->getValue()}"{/if}{/if}
            class="{$params.class->getValue()} {$rounded}
            {if $params.fluid->getValue() === true} img-fluid{/if}
            {if $params['fluid-grow']->getValue() === true} img-fluid w-100{/if}
            {if $params.thumbnail->getValue() === true} img-thumbnail{/if}
            {if $params.left->getValue() === true} float-left{/if}
            {if $params.right->getValue() === true} float-right{/if}
            {if $params.center->getValue() === true} mx-auto d-block{/if}"
            {if $params.id->hasValue()}id="{$params.id->getValue()}"{/if}
            {if $params.title->hasValue()}title="{$params.title->getValue()}"{/if}
            alt="{if $params.alt->hasValue()}{$params.alt->getValue()}{/if}"
            {if $useGetImageSize}
                {et_getImageSize src=$params.src->getValue() assign='et_imageSize'}
                {if !empty($et_imageSize['attributes'])}{$et_imageSize['attributes']}{/if}
            {else}
                {if $params.width->hasValue() && intval($params.width->getValue()) > 0}width="{$params.width->getValue()}"{/if}
                {if $params.height->hasValue() && intval($params.height->getValue()) > 0}height="{$params.height->getValue()}"{/if}
            {/if}
            {if $params.style->hasValue()}style="{$params.style->getValue()}"{/if}
            {if $params.itemprop->hasValue()}itemprop="{$params.itemprop->getValue()}"{/if}
            {if $params.itemscope->getValue() === true}itemscope {/if}{if $params.itemtype->hasValue()}itemtype="{$params.itemtype->getValue()}"{/if}
            {if $params.itemid->hasValue()}itemid="{$params.itemid->getValue()}"{/if}
            {if $params.role->hasValue()}role="{$params.role->getValue()}"{/if}
            {if $params.aria->hasValue()}
                {foreach $params.aria->getValue() as $ariaKey => $ariaVal} aria-{$ariaKey}="{$ariaVal}" {/foreach}
            {/if}
            {if $params.data->hasValue()}
                {foreach $params.data->getValue() as $dataKey => $dataVal} data-{$dataKey}="{$dataVal}" {/foreach}
            {/if}
            {if isset($params.attribs) && $params.attribs->hasValue()}
                {foreach $params.attribs->getValue() as $key => $val} {$key}="{$val}" {/foreach}
            {/if}
        >
    {if $useModernFormats}
    </picture>
    {/if}
{/if}
