{extends file="widgets/base/widget.tpl"}
{strip}
    {et_isShopVersionAtLeast value="5.2.0-beta" assign='shopIsAtLeast52'}
    {block name="et-widget-inline-styles"}
        {if $et_PropertyValueBanner.customColorsEnabled}
            <style type="text/css">
                #{$et_BaseWidget.cssId}.bg-fullsize,
                #{$et_BaseWidget.cssId}.bg-boxed .container,
                #{$et_BaseWidget.cssId} .et-property-value-banner-content {
                    {if !empty($et_PropertyValueBanner.colorBackground)}background-color:{$et_PropertyValueBanner.colorBackground};{/if}
                    {if !empty($et_PropertyValueBanner.colorFont)}color:{$et_PropertyValueBanner.colorFont};{/if}
                }
            </style>
        {/if}
        {if $shopIsAtLeast52}
            {if $Einstellungen.navigationsfilter.merkmalwert_beschreibung_anzeigen === 'Y' && $oNavigationsinfo->getCharacteristicValue() !== null && $oNavigationsinfo->getCharacteristicValue()->getDescription() !== null && strlen($oNavigationsinfo->getCharacteristicValue()->getDescription()) > 0}
                {include file="widgets/snippets/style_limit_height.tpl" breakpointValues=$et_PropertyValueBanner.shortenToLength targetElement="#{$et_BaseWidget.cssId} .et-property-value-banner-description"}
            {/if}
        {else}
            {if $Einstellungen.navigationsfilter.merkmalwert_beschreibung_anzeigen === 'Y' && $oNavigationsinfo->getCharacteristicValue() !== null && strlen($oNavigationsinfo->getCharacteristicValue()->cBeschreibung) > 0}
                {include file="widgets/snippets/style_limit_height.tpl" breakpointValues=$et_PropertyValueBanner.shortenToLength targetElement="#{$et_BaseWidget.cssId} .et-property-value-banner-description"}
            {/if}
        {/if}
    {/block}
    {block name="et-widget-container-inner"}
        <div class="et-property-value-banner-wrapper et-property-value-banner-layout-{$et_PropertyValueBanner.layout} row">
            <div class="col">
                {block name="et-property-value-banner-content"}
                    <div class="et-property-value-banner-content">
                        {if !$et_PropertyValueBanner.hideImage}
                            {block name="et-property-value-banner-image"}
                                {if isset($et_PropertyValueBanner.image.src) && $et_PropertyValueBanner.image.src !== ''}
                                    <div class="et-property-value-banner-image">
                                        {if !empty($et_PropertyValueBanner.imageLink)}
                                            <a href="{$et_PropertyValueBanner.imageLink.href}"{if $et_PropertyValueBanner.imageLink.title !== ''} title="{$et_PropertyValueBanner.imageLink.title|escape:'html'}"{/if}{if $et_PropertyValueBanner.imageLink.external} target="_blank" rel="noreferrer noopener"{/if} class="no-style">
                                        {/if}
                                        {image fluid-grow=true lazy=$et_BaseWidget.lazyLoadImages webp=!empty($et_PropertyValueBanner.image.srcWebP)
                                            src="{$et_PropertyValueBanner.image.src}"
                                            alt="{$et_PropertyValueBanner.image.alt}"
                                            width={$et_PropertyValueBanner.image.width}
                                            height={$et_PropertyValueBanner.image.height}
                                        }
                                        {if !empty($et_PropertyValueBanner.imageLink)}
                                            </a>
                                        {/if}
                                    </div>
                                {elseif isset($oNavigationsinfo)
                                    && $oNavigationsinfo->getCharacteristicValue() !== null
                                    && $oNavigationsinfo->getCharacteristicValue()->getImage() !== null
                                    && $oNavigationsinfo->getCharacteristicValue()->getImage() !== $smarty.const.BILD_KEIN_KATEGORIEBILD_VORHANDEN
                                    && $oNavigationsinfo->getCharacteristicValue()->getImage() !== 'gfx/keinBild_kl.gif'
                                    && $oNavigationsinfo->getCharacteristicValue()->getImage() !== $imageBaseURL|cat:$smarty.const.BILD_KEIN_KATEGORIEBILD_VORHANDEN}
                                    <div class="et-property-value-banner-image">
                                        {if !empty($et_PropertyValueBanner.imageLink)}
                                            <a href="{$et_PropertyValueBanner.imageLink.href}"{if $et_PropertyValueBanner.imageLink.title !== ''} title="{$et_PropertyValueBanner.imageLink.title|escape:'html'}"{/if}{if $et_PropertyValueBanner.imageLink.external} target="_blank" rel="noreferrer noopener"{/if} class="no-style">
                                        {/if}
                                        {image fluid-grow=true lazy=$et_BaseWidget.lazyLoadImages webp=true center=false
                                            src="{$oNavigationsinfo->getCharacteristicValue()->getImage(\JTL\Media\Image::SIZE_LG)}"
                                            srcset="{$oNavigationsinfo->getCharacteristicValue()->getImage(\JTL\Media\Image::SIZE_XS)} {$Einstellungen.bilder.bilder_merkmalwert_mini_breite}w,
                                                    {$oNavigationsinfo->getCharacteristicValue()->getImage(\JTL\Media\Image::SIZE_SM)} {$Einstellungen.bilder.bilder_merkmalwert_klein_breite}w,
                                                    {$oNavigationsinfo->getCharacteristicValue()->getImage(\JTL\Media\Image::SIZE_MD)} {$Einstellungen.bilder.bilder_merkmalwert_normal_breite}w,
                                                    {$oNavigationsinfo->getCharacteristicValue()->getImage(\JTL\Media\Image::SIZE_LG)} {$Einstellungen.bilder.bilder_merkmalwert_gross_breite}w"
                                            alt="{if $shopIsAtLeast52}{if $oNavigationsinfo->getCharacteristicValue()->getDescription() !== null}{$oNavigationsinfo->getCharacteristicValue()->getDescription()|strip_tags|truncate:50|escape:'html'}{/if}{else}{$oNavigationsinfo->getCharacteristicValue()->cBeschreibung|strip_tags|truncate:50|escape:'html'}{/if}"
                                            sizes="auto"
                                        }
                                        {if !empty($et_PropertyValueBanner.imageLink)}
                                            </a>
                                        {/if}
                                    </div>
                                {/if}
                            {/block}
                        {/if}
                        {if !$et_PropertyValueBanner.hideTitle || !$et_PropertyValueBanner.hideDescription}
                            {block name="et-property-value-banner-content-positioner"}
                                <div class="et-property-value-banner-content-positioner">
                                    <div class="et-property-value-banner-backdrop">
                                        {block name="et-property-value-banner-content-wrapper"}
                                            {if isset($oNavigationsinfo) && $oNavigationsinfo->getName() && !$et_PropertyValueBanner.hideTitle}
                                                {block name="et-property-value-banner-title"}
                                                    {include file="widgets/base/textfield.tpl" value=$et_PropertyValueBanner.title type="h1" classes="et-property-value-banner-title"}
                                                {/block}
                                            {/if}
                                            {if !$et_PropertyValueBanner.hideDescription}
                                                {$enableShorten = false}
                                                {if $shopIsAtLeast52}
                                                    {if $Einstellungen.navigationsfilter.merkmalwert_beschreibung_anzeigen === 'Y' && $oNavigationsinfo->getCharacteristicValue() !== null && $oNavigationsinfo->getCharacteristicValue()->getDescription() !== null && strlen($oNavigationsinfo->getCharacteristicValue()->getDescription()) > 0}
                                                        {$enableShorten = true}
                                                        {block name="et-property-value-banner-description"}
                                                            <div class="et-property-value-banner-description" {if $et_PropertyValueBanner.layout === 'textOnImage'}data-line-clamp{else}data-shorten-to{/if}='{json_encode($et_PropertyValueBanner.shortenToLength)}' data-shorten-to-height-auto="{if $et_PropertyValueBanner.shortenToAutoHeight}true{else}false{/if}">
                                                                {$oNavigationsinfo->getCharacteristicValue()->getDescription()}
                                                            </div>
                                                        {/block}
                                                    {/if}
                                                {else}
                                                    {if $Einstellungen.navigationsfilter.merkmalwert_beschreibung_anzeigen === 'Y' && $oNavigationsinfo->getCharacteristicValue() !== null && strlen($oNavigationsinfo->getCharacteristicValue()->cBeschreibung) > 0}
                                                        {$enableShorten = true}
                                                        {block name="et-property-value-banner-description"}
                                                            <div class="et-property-value-banner-description" {if $et_PropertyValueBanner.layout === 'textOnImage'}data-line-clamp{else}data-shorten-to{/if}='{json_encode($et_PropertyValueBanner.shortenToLength)}' data-shorten-to-height-auto="{if $et_PropertyValueBanner.shortenToAutoHeight}true{else}false{/if}">
                                                                {$oNavigationsinfo->getCharacteristicValue()->cBeschreibung}
                                                            </div>
                                                        {/block}
                                                    {/if}
                                                {/if}
                                                {block name="et-property-value-banner-description-buttons"}
                                                    {if $enableShorten}
                                                        {block name="et-property-value-banner-description-buttons-read-more"}
                                                            <div class="et-shorten-to-more et-line-clamp-more" style="display: none" role="button" aria-expanded="true">
                                                                <a class="link-discreet" title="{et_language key='et360_read_more'}">{et_language key='et360_read_more'}<i class="{et_getIcon key='readMore'}"></i></a>
                                                            </div>
                                                        {/block}
                                                        {block name="et-property-value-banner-description-buttons-read-less"}{/block}
                                                    {/if}
                                                {/block}
                                            {/if}
                                        {/block}
                                    </div>
                                </div>
                            {/block}
                        {/if}
                    </div>
                {/block}
            </div>
        </div>
    {/block}
{/strip}