{extends file="widgets/base/widget.tpl"}
{strip}
    {et_isShopVersionAtLeast value="5.2.0-beta" assign='shopIsAtLeast52'}
    {if empty($etGlobalSettings)}
        {et_getGlobalSettings assign="etGlobalSettings"}
    {/if}
    {$manufacturerDescription = ''}
    {if $shopIsAtLeast52}
        {if $Einstellungen.navigationsfilter.hersteller_beschreibung_anzeigen === 'Y' && isset($oNavigationsinfo) && $oNavigationsinfo->getManufacturer() && strlen($oNavigationsinfo->getManufacturer()->getDescription()) > 0}
            {$manufacturerDescription = $oNavigationsinfo->getManufacturer()->getDescription()}
        {/if}
    {else}
        {if $Einstellungen.navigationsfilter.hersteller_beschreibung_anzeigen === 'Y' && isset($oNavigationsinfo) && $oNavigationsinfo->getManufacturer() && strlen($oNavigationsinfo->getManufacturer()->cBeschreibung) > 0}
            {$manufacturerDescription = $oNavigationsinfo->getManufacturer()->cBeschreibung}
        {/if}
    {/if}

    {* Remove GPSR part from manufacturerDescription if necessary *}
    {if ($etGlobalSettings.gpsrSource === 'manufacturerDescriptionBefore' || $etGlobalSettings.gpsrSource === 'manufacturerDescriptionAfter') && !empty($etGlobalSettings.gpsrSourceDivider) && !empty($manufacturerDescription)}
        {et_splitGpsr content=$manufacturerDescription return='content' assign='manufacturerDescription'}
    {/if}

    {block name="et-widget-inline-styles"}
        {if $et_ManufacturerBanner.customColorsEnabled}
            <style type="text/css">
                #{$et_BaseWidget.cssId}.bg-fullsize,
                #{$et_BaseWidget.cssId}.bg-boxed .container,
                #{$et_BaseWidget.cssId} .et-manufacturer-banner-content {
                    {if !empty($et_ManufacturerBanner.colorBackground)}background-color:{$et_ManufacturerBanner.colorBackground};{/if}
                    {if !empty($et_ManufacturerBanner.colorFont)}color:{$et_ManufacturerBanner.colorFont};{/if}
                }
            </style>
        {/if}
        {if !empty($manufacturerDescription)}
            {include file="widgets/snippets/style_limit_height.tpl" breakpointValues=$et_ManufacturerBanner.shortenToLength targetElement="#{$et_BaseWidget.cssId} .et-manufacturer-banner-description"}
        {/if}
    {/block}
    {block name="et-widget-container-inner"}
        <div class="et-manufacturer-banner-wrapper et-manufacturer-banner-layout-{$et_ManufacturerBanner.layout} row">
            <div class="col">
                {block name="et-manufacturer-banner-content"}
                    <div class="et-manufacturer-banner-content">
                        {if !$et_ManufacturerBanner.hideImage}
                            {block name="et-manufacturer-banner-image"}
                                {if isset($et_ManufacturerBanner.image.src) && $et_ManufacturerBanner.image.src !== ''}
                                    <div class="et-manufacturer-banner-image">
                                        {if !empty($et_ManufacturerBanner.imageLink)}
                                            <a href="{$et_ManufacturerBanner.imageLink.href}"{if $et_ManufacturerBanner.imageLink.title !== ''} title="{$et_ManufacturerBanner.imageLink.title|escape:'html'}"{/if}{if $et_ManufacturerBanner.imageLink.external} target="_blank" rel="noreferrer noopener"{/if} class="no-style">
                                        {/if}
                                        {image fluid-grow=true lazy=$et_BaseWidget.lazyLoadImages webp=!empty($et_ManufacturerBanner.image.srcWebP)
                                            src="{$et_ManufacturerBanner.image.src}"
                                            alt="{$et_ManufacturerBanner.image.alt}"
                                            width={$et_ManufacturerBanner.image.width}
                                            height={$et_ManufacturerBanner.image.height}
                                        }
                                        {if !empty($et_ManufacturerBanner.imageLink)}
                                            </a>
                                        {/if}
                                    </div>
                                {elseif isset($oNavigationsinfo)
                                    && $oNavigationsinfo->getManufacturer() !== null
                                    && $oNavigationsinfo->getManufacturer()->getImage() !== null
                                    && $oNavigationsinfo->getManufacturer()->getImage() !== $smarty.const.BILD_KEIN_KATEGORIEBILD_VORHANDEN
                                    && $oNavigationsinfo->getManufacturer()->getImage() !== 'gfx/keinBild_kl.gif'
                                    && $oNavigationsinfo->getManufacturer()->getImage() !== $imageBaseURL|cat:$smarty.const.BILD_KEIN_KATEGORIEBILD_VORHANDEN}
                                    <div class="et-manufacturer-banner-image">
                                        {if !empty($et_ManufacturerBanner.imageLink)}
                                            <a href="{$et_ManufacturerBanner.imageLink.href}"{if $et_ManufacturerBanner.imageLink.title !== ''} title="{$et_ManufacturerBanner.imageLink.title|escape:'html'}"{/if}{if $et_ManufacturerBanner.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->getManufacturer()->getImage(\JTL\Media\Image::SIZE_LG)}"
                                            srcset="{$oNavigationsinfo->getManufacturer()->getImage(\JTL\Media\Image::SIZE_XS)} {$Einstellungen.bilder.bilder_hersteller_mini_breite}w,
                                                    {$oNavigationsinfo->getManufacturer()->getImage(\JTL\Media\Image::SIZE_SM)} {$Einstellungen.bilder.bilder_hersteller_klein_breite}w,
                                                    {$oNavigationsinfo->getManufacturer()->getImage(\JTL\Media\Image::SIZE_MD)} {$Einstellungen.bilder.bilder_hersteller_normal_breite}w,
                                                    {$oNavigationsinfo->getManufacturer()->getImage(\JTL\Media\Image::SIZE_LG)} {$Einstellungen.bilder.bilder_hersteller_gross_breite}w"
                                            alt="{$manufacturerDescription|strip_tags|truncate:50|escape:'html'}"
                                            sizes="auto"
                                        }
                                        {if !empty($et_ManufacturerBanner.imageLink)}
                                            </a>
                                        {/if}
                                    </div>
                                {/if}
                            {/block}
                        {/if}
                        {if !$et_ManufacturerBanner.hideTitle || !$et_ManufacturerBanner.hideDescription}
                            {block name="et-manufacturer-banner-content-positioner"}
                                <div class="et-manufacturer-banner-content-positioner">
                                    <div class="et-manufacturer-banner-backdrop">
                                        {block name="et-manufacturer-banner-content-wrapper"}
                                            {if isset($oNavigationsinfo) && $oNavigationsinfo->getName() && !$et_ManufacturerBanner.hideTitle}
                                                {block name="et-manufacturer-banner-title"}
                                                    {include file="widgets/base/textfield.tpl" value=$et_ManufacturerBanner.title type="h1" classes="et-manufacturer-banner-title"}
                                                {/block}
                                            {/if}
                                            {if !$et_ManufacturerBanner.hideDescription}
                                                {$enableShorten = false}
                                                {if !empty($manufacturerDescription)}
                                                    {$enableShorten = true}
                                                    {block name="et-manufacturer-banner-description"}
                                                        <div class="et-manufacturer-banner-description" {if $et_ManufacturerBanner.layout === 'textOnImage'}data-line-clamp{else}data-shorten-to{/if}='{json_encode($et_ManufacturerBanner.shortenToLength)}' data-shorten-to-height-auto="{if $et_ManufacturerBanner.shortenToAutoHeight}true{else}false{/if}">
                                                            {$manufacturerDescription}
                                                        </div>
                                                    {/block}
                                                {/if}
                                                {block name="et-manufacturer-banner-description-buttons"}
                                                    {if $enableShorten}
                                                        {block name="et-manufacturer-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-manufacturer-banner-description-buttons-read-less"}{/block}
                                                    {/if}
                                                {/block}
                                            {/if}
                                        {/block}
                                    </div>
                                </div>
                            {/block}
                        {/if}
                    </div>
                {/block}
            </div>
        </div>
    {/block}
{/strip}