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