{extends file="widgets/base/widget.tpl"}

{strip}
    {block name="et-widget-inline-styles"}
        {if $et_HotspotBanner.customColorsEnabled}
            <style type="text/css">
                #{$et_BaseWidget.cssId}.bg-fullsize,
                #{$et_BaseWidget.cssId}.bg-boxed .container {
                    {if !empty($et_HotspotBanner.colorBackground)}background-color:{$et_HotspotBanner.colorBackground};{/if}
                    {if !empty($et_HotspotBanner.colorFont)}color:{$et_HotspotBanner.colorFont};{/if}
                }
                {if !empty($et_HotspotBanner.colorSpot)}#{$et_BaseWidget.cssId} .et-hotspot-banner-hotspot-spot:after { background-color: {$et_HotspotBanner.colorSpot}; }{/if}
                {if !empty($et_HotspotBanner.colorSpotHover)}#{$et_BaseWidget.cssId} .et-hotspot-banner-hotspot-spot:hover:after { background-color: {$et_HotspotBanner.colorSpotHover}; }{/if}
                {if !empty($et_HotspotBanner.colorSpotBackground)}#{$et_BaseWidget.cssId} .et-hotspot-banner-hotspot-spot { background-color: {$et_HotspotBanner.colorSpotBackground}; }{/if}
                {if !empty($et_HotspotBanner.colorSpotBackgroundHover)}#{$et_BaseWidget.cssId} .et-hotspot-banner-hotspot-spot:hover { background-color: {$et_HotspotBanner.colorSpotBackgroundHover}; }{/if}
                {if !empty($et_HotspotBanner.colorFontContent)}#{$et_BaseWidget.cssId} .et-hotspot-banner-hotspot-content { color: {$et_HotspotBanner.colorFontContent}; }{/if}
                {if !empty($et_HotspotBanner.colorBackgroundContent)}#{$et_BaseWidget.cssId} .et-hotspot-banner-hotspot-content { background-color: {$et_HotspotBanner.colorBackgroundContent}; }{/if}
                {if !empty($et_HotspotBanner.colorBorderContent)}#{$et_BaseWidget.cssId} .et-hotspot-banner-hotspot-content { border-color: {$et_HotspotBanner.colorBorderContent}; }{/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-hotspot-banner-wrapper et-hotspot-banner-spot-animation-{$et_HotspotBanner.spotAnimation} et-hotspot-banner-spot-animation-hover-{$et_HotspotBanner.spotAnimationHover}">
            {block name="et-hotspot-banner-headline"}
                {include file="widgets/base/textfield.tpl" value=$et_HotspotBanner.headline type="h2" asRow=true classes="et-widget-headline"}
            {/block}
            {block name="et-hotspot-banner-text-before"}
                {if !empty($et_HotspotBanner.textBefore.value)}{include file="widgets/base/textfield.tpl" value=$et_HotspotBanner.textBefore type='div' classes="et-text-before"}{/if}
            {/block}
            {block name="et-hotspot-banner-general-link-above"}
                {* Placeholder *}
            {/block}
            {block name="et-hotspot-banner-hotspots-wrapper"}
                <div class="et-hotspot-banner-hotspots-wrapper">
                    <div class="et-hotspot-banner-hotspots-container">
                        {image lazy=$et_BaseWidget.lazyLoadImages webp=!empty($et_HotspotBanner.image.srcWebP)
                            src="{$et_HotspotBanner.image.src}"
                            alt="{$et_HotspotBanner.image.alt}"
                            width={$et_HotspotBanner.image.width}
                            height={$et_HotspotBanner.image.height}
                            class="img-responsive et-hotspot-banner-main-image"
                        }
                        <div class="et-hotspot-banner-hotspots">
                            {foreach $et_HotspotBanner.hotspots as $hotspot}
                                <div class="et-hotspot-banner-hotspot" id="et-hotspot-banner-hotspot-{$hotspot.id}">
                                    {block name="et-hotspot-banner-hotspot-positioning-style"}
                                        <style>
                                            #et-hotspot-banner-hotspot-{$hotspot.id} {
                                                {if $hotspot.posX.xs > 0 && $hotspot.posX.xs < 100 && $hotspot.posY.xs > 0 && $hotspot.posY.xs < 100}
                                                    left: calc({$hotspot.posX.xs}% - (var(--et-hotspot-banner-spot-width) / 2));
                                                    top: calc({$hotspot.posY.xs}% - (var(--et-hotspot-banner-spot-width) / 2));
                                                {else}
                                                    display: none;
                                                {/if}
                                            }
                                            @media (min-width: {$et_global.breakpoints.smMin}px) and (max-width: {$et_global.breakpoints.smMax}px) {
                                                #et-hotspot-banner-hotspot-{$hotspot.id} {
                                                    {if $hotspot.posX.sm > 0 && $hotspot.posX.sm < 100 && $hotspot.posY.sm > 0 && $hotspot.posY.sm < 100}
                                                        left: calc({$hotspot.posX.sm}% - (var(--et-hotspot-banner-spot-width) / 2));
                                                        top: calc({$hotspot.posY.sm}% - (var(--et-hotspot-banner-spot-width) / 2));
                                                    {else}
                                                        display: none;
                                                    {/if}
                                                }
                                            }
                                            @media (min-width: {$et_global.breakpoints.mdMin}px) and (max-width: {$et_global.breakpoints.mdMax}px) {
                                                #et-hotspot-banner-hotspot-{$hotspot.id} {
                                                    {if $hotspot.posX.md > 0 && $hotspot.posX.md < 100 && $hotspot.posY.md > 0 && $hotspot.posY.md < 100}
                                                        left: calc({$hotspot.posX.md}% - (var(--et-hotspot-banner-spot-width) / 2));
                                                        top: calc({$hotspot.posY.md}% - (var(--et-hotspot-banner-spot-width) / 2));
                                                    {else}
                                                        display: none;
                                                    {/if}
                                                }
                                            }
                                            @media (min-width: {$et_global.breakpoints.lgMin}px) and (max-width: {$et_global.breakpoints.lgMax}px) {
                                                #et-hotspot-banner-hotspot-{$hotspot.id} {
                                                    {if $hotspot.posX.lg > 0 && $hotspot.posX.lg < 100 && $hotspot.posY.lg > 0 && $hotspot.posY.lg < 100}
                                                        left: calc({$hotspot.posX.lg}% - (var(--et-hotspot-banner-spot-width) / 2));
                                                        top: calc({$hotspot.posY.lg}% - (var(--et-hotspot-banner-spot-width) / 2));
                                                    {else}
                                                        display: none;
                                                    {/if}
                                                }
                                            }
                                            @media (min-width: {$et_global.breakpoints.xlMin}px) {
                                                #et-hotspot-banner-hotspot-{$hotspot.id} {
                                                    {if $hotspot.posX.xl > 0 && $hotspot.posX.xl < 100 && $hotspot.posY.xl > 0 && $hotspot.posY.xl < 100}
                                                        left: calc({$hotspot.posX.xl}% - (var(--et-hotspot-banner-spot-width) / 2));
                                                        top: calc({$hotspot.posY.xl}% - (var(--et-hotspot-banner-spot-width) / 2));
                                                    {else}
                                                        display: none;
                                                    {/if}
                                                }
                                            }
                                        </style>
                                    {/block}
                                    {block name="et-hotspot-banner-hotspot-color-style"}
                                        {if $hotspot.customColorsEnabled}
                                            <style type="text/css">
                                                {if !empty($hotspot.colorSpot)}#{$et_BaseWidget.cssId} #et-hotspot-banner-hotspot-{$hotspot.id} .et-hotspot-banner-hotspot-spot:after { background-color: {$hotspot.colorSpot}; }{/if}
                                                {if !empty($hotspot.colorSpotHover)}#{$et_BaseWidget.cssId} #et-hotspot-banner-hotspot-{$hotspot.id} .et-hotspot-banner-hotspot-spot:hover:after { background-color: {$hotspot.colorSpotHover}; }{/if}
                                                {if !empty($hotspot.colorSpotBackground)}#{$et_BaseWidget.cssId} #et-hotspot-banner-hotspot-{$hotspot.id} .et-hotspot-banner-hotspot-spot { background-color: {$hotspot.colorSpotBackground}; }{/if}
                                                {if !empty($hotspot.colorSpotBackgroundHover)}#{$et_BaseWidget.cssId} #et-hotspot-banner-hotspot-{$hotspot.id} .et-hotspot-banner-hotspot-spot:hover { background-color: {$hotspot.colorSpotBackgroundHover}; }{/if}
                                                {if !empty($hotspot.colorFontContent)}#{$et_BaseWidget.cssId} #et-hotspot-banner-hotspot-{$hotspot.id} .et-hotspot-banner-hotspot-content { color: {$hotspot.colorFontContent}; }{/if}
                                                {if !empty($hotspot.colorBackgroundContent)}#{$et_BaseWidget.cssId} #et-hotspot-banner-hotspot-{$hotspot.id} .et-hotspot-banner-hotspot-content { background-color: {$hotspot.colorBackgroundContent}; }{/if}
                                                {if !empty($hotspot.colorBorderContent)}#{$et_BaseWidget.cssId} #et-hotspot-banner-hotspot-{$hotspot.id} .et-hotspot-banner-hotspot-content { border-color: {$hotspot.colorBorderContent}; }{/if}
                                            </style>
                                        {/if}
                                    {/block}
                                    {if $hotspot.type === 'link' && isset($hotspot.link, $hotspot.link.href) && $hotspot.link.href !== ''}
                                        <a href="{$hotspot.link.href}" title="{$hotspot.link.title}" class="et-hotspot-banner-hotspot-link link-discreet"{if $hotspot.link.external} rel="noreferrer noopener" target="_blank"{/if}>
                                    {/if}
                                        <div class="et-hotspot-banner-hotspot-spot">
                                            {* This is the spot visible on the image *}
                                        </div>
                                    {if $hotspot.type === 'link' && isset($hotspot.link, $hotspot.link.href) && $hotspot.link.href !== ''}
                                        </a>
                                    {/if}
                                    {if $hotspot.type !== 'link'}
                                        <div class="et-hotspot-banner-hotspot-content-wrapper et-position-xs-{if $hotspot.posX.xs > 50}left{else}right{/if} et-position-sm-{if $hotspot.posX.sm > 50}left{else}right{/if} et-position-md-{if $hotspot.posX.md > 50}left{else}right{/if} et-position-lg-{if $hotspot.posX.lg > 50}left{else}right{/if} et-position-xl-{if $hotspot.posX.xl > 50}left{else}right{/if}">
                                            <div class="et-hotspot-banner-hotspot-content"{if $hotspot.type === 'product'} itemscope itemtype="https://schema.org/Product"{/if}>
                                                {if $hotspot.type === 'manual' && isset($hotspot.link, $hotspot.link.href) && $hotspot.link.href !== ''}
                                                    <a href="{$hotspot.link.href}" title="{$hotspot.link.title}" class="et-hotspot-banner-hotspot-link link-discreet"{if $hotspot.link.external} rel="noreferrer noopener" target="_blank"{/if}>
                                                {elseif $hotspot.type === 'product'}
                                                    <a href="{$hotspot.product->cURLFull}" class="et-hotspot-banner-hotspot-link link-discreet">
                                                {/if}
                                                    <div class="et-hotspot-banner-hotspot-image-wrapper">
                                                        {if isset($hotspot.product->oSuchspecialBild)}
                                                            {include file='snippets/ribbon.tpl' Artikel=$hotspot.product}
                                                        {/if}
                                                        {if $hotspot.type === 'manual' || $hotspot.imageSource === 'manual'}
                                                            {if !empty($hotspot.image.src)}
                                                                {image fluid=true lazy=$et_BaseWidget.lazyLoadImages webp=!empty($hotspot.image.srcWebP)
                                                                src="{$hotspot.image.src}"
                                                                alt="{$hotspot.image.alt|escape}"
                                                                width={$hotspot.image.width}
                                                                height={$hotspot.image.height}
                                                                class="img-responsive et-hotspot-banner-hotspot-image"
                                                            }
                                                            {/if}
                                                        {elseif $hotspot.type === 'product'}
                                                            {include file='snippets/image.tpl' item=$hotspot.product square=false srcSize='sm' class='et-hotspot-banner-hotspot-image' lazy=$et_BaseWidget.lazyLoadImages}
                                                        {/if}
                                                    </div>
                                                {if $hotspot.type === 'product' || ($hotspot.type === 'manual' && isset($hotspot.link, $hotspot.link.href) && $hotspot.link.href !== '')}
                                                    </a>
                                                {/if}
                                                {if $hotspot.type === 'product' && $et_HotspotBanner.showProductManufacturer}
                                                    <div class="et-hotspot-banner-manufacturer">
                                                        <a href="{if !empty($hotspot.product->cHerstellerHomepage)}{$hotspot.product->cHerstellerHomepage}{else}{$ShopURL}/{$hotspot.product->cHerstellerSeo}{/if}" class="link-discreet">
                                                            {if ($Einstellungen.artikeldetails.artikeldetails_hersteller_anzeigen === 'B'
                                                            || $Einstellungen.artikeldetails.artikeldetails_hersteller_anzeigen === 'BT')
                                                            && !empty($hotspot.product->cHerstellerBildURLKlein)
                                                            }
                                                                {image lazy=$et_BaseWidget.lazyLoadImages
                                                                webp=true
                                                                src=$hotspot.product->cHerstellerBildURLKlein
                                                                alt=$hotspot.product->cHersteller
                                                                }
                                                            {/if}
                                                            {if $Einstellungen.artikeldetails.artikeldetails_hersteller_anzeigen !== 'B'}
                                                                {$hotspot.product->cHersteller}
                                                            {/if}
                                                        </a>
                                                    </div>
                                                {/if}
                                                {if $hotspot.type === 'manual' && isset($hotspot.link, $hotspot.link.href) && $hotspot.link.href !== ''}
                                                    <a href="{$hotspot.link.href}" title="{$hotspot.link.title}" class="et-hotspot-banner-hotspot-link link-discreet"{if $hotspot.link.external} rel="noreferrer noopener" target="_blank"{/if}>
                                                {elseif $hotspot.type === 'product'}
                                                    <a href="{$hotspot.product->cURLFull}" class="et-hotspot-banner-hotspot-link link-discreet">
                                                {/if}
                                                    {if $hotspot.type === 'manual' || $hotspot.titleSource === 'manual'}
                                                        {if !empty($hotspot.title.value)}{include file="widgets/base/textfield.tpl" value=$hotspot.title type='div' classes="et-hotspot-banner-hotspot-title"}{/if}
                                                    {elseif $hotspot.type === 'product'}
                                                        <div class="et-hotspot-banner-hotspot-title">
                                                            {$hotspot.product->cName}
                                                        </div>
                                                    {/if}
                                                {if $hotspot.type === 'product' || ($hotspot.type === 'manual' && isset($hotspot.link, $hotspot.link.href) && $hotspot.link.href !== '')}
                                                    </a>
                                                {/if}
                                                {if $hotspot.type === 'product' && $et_HotspotBanner.showProductRating && $hotspot.product->fDurchschnittsBewertung > 0}
                                                    <div class="et-hotspot-banner-rating">
                                                        {include file='productdetails/rating.tpl' stars=$hotspot.product->fDurchschnittsBewertung}
                                                    </div>
                                                {/if}
                                                {if $hotspot.type === 'manual' || $hotspot.descriptionSource === 'manual'}
                                                    {if !empty($hotspot.description.value)}{include file="widgets/base/textfield.tpl" value=$hotspot.description type='div' classes="et-hotspot-banner-hotspot-description"}{/if}
                                                {elseif $hotspot.type === 'product'  &&
                                                    ($hotspot.descriptionSource === 'longDescription' && !empty($hotspot.product->cBeschreibung)
                                                        || $hotspot.descriptionSource === 'shortDescription' && !empty($hotspot.product->cKurzBeschreibung))}
                                                    <div class="et-hotspot-banner-hotspot-description">
                                                        {if $hotspot.descriptionSource === 'longDescription' && !empty($hotspot.product->cBeschreibung)}{$hotspot.product->cBeschreibung}{/if}
                                                        {if $hotspot.descriptionSource === 'shortDescription' && !empty($hotspot.product->cKurzBeschreibung)}{$hotspot.product->cKurzBeschreibung}{/if}
                                                    </div>
                                                {/if}
                                                {if $hotspot.type === 'product' && $et_HotspotBanner.showProductDeliveryStatus}
                                                    <div class="et-hotspot-banner-stock">
                                                        {include file='productdetails/stock.tpl' skipMicrodata=true Artikel=$hotspot.product}
                                                    </div>
                                                {/if}
                                                {if $hotspot.type === 'product' && $et_HotspotBanner.showProductPrice}
                                                    <div class="et-hotspot-banner-price" itemprop="offers" itemscope itemtype="https://schema.org/Offer">
                                                        <link itemprop="businessFunction" href="http://purl.org/goodrelations/v1#Sell"/>
                                                        {include file='productdetails/price.tpl' Artikel=$hotspot.product tplscope='hotspot'}
                                                        {include file='productdetails/stock_microdata.tpl' Artikel=$hotspot.product}
                                                    </div>
                                                {/if}
                                            </div>
                                        </div>
                                    {/if}
                                </div>
                            {/foreach}
                        </div>
                    </div>
                </div>
            {/block}
            {block name="et-hotspot-banner-text-after"}
                {if !empty($et_HotspotBanner.textAfter.value)}{include file="widgets/base/textfield.tpl" value=$et_HotspotBanner.textAfter type='div' classes="et-text-after"}{/if}
            {/block}
            {block name="et-hotspot-banner-general-link-below"}
                {if !empty($et_HotspotBanner.linkLabel.value) && !empty($et_HotspotBanner.link)}
                    <div class="et-hotspot-banner-general-link et-position-below-items et-align-horizontal-{$et_HotspotBanner.linkAlignmentHorizontal}">
                        {capture name='linkLabel'}{include file="widgets/base/textfield.tpl" value=$et_HotspotBanner.linkLabel type='span'}{/capture}
                        {include file='widgets/base/button.tpl' variant="{($et_HotspotBanner.linkDisplayMode === 'button') ? 'primary':'link'}" label="{$smarty.capture.linkLabel}" href="{$et_HotspotBanner.link.href}" isExternal="{$et_HotspotBanner.link.external}" title="{$et_HotspotBanner.link.title}"}
                    </div>
                {/if}
            {/block}
        </div>
    {/block}
{/strip}