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

{strip}
    {block name="et-widget-inline-styles"}
        {if isset($et_HeroProduct.product) &&
            ($et_HeroProduct.customColorsEnabled
            || !empty($et_HeroProduct.maxImageHeight.xs)
            || !empty($et_HeroProduct.maxImageHeight.sm)
            || !empty($et_HeroProduct.maxImageHeight.md)
            || !empty($et_HeroProduct.maxImageHeight.lg)
            || !empty($et_HeroProduct.maxImageHeight.xl)
            )}
            <style type="text/css">
                {if $et_HeroProduct.customColorsEnabled}
                     #{$et_BaseWidget.cssId}.bg-fullsize,
                     #{$et_BaseWidget.cssId}.bg-boxed .container {
                        {if !empty($et_HeroProduct.colorBackground)} background-color: {$et_HeroProduct.colorBackground};{/if}
                        {if !empty($et_HeroProduct.colorFont)} color: {$et_HeroProduct.colorFont};{/if}
                     }
                {/if}
                {if !empty($et_HeroProduct.maxImageHeight.xs)} @media (max-width: {$et_global.breakpoints.xsMax}px) {  #{$et_BaseWidget.cssId} .et-hero-product-image img { max-height:{$et_HeroProduct.maxImageHeight.xs}px; width: auto; } }{/if}
                {if !empty($et_HeroProduct.maxImageHeight.sm)} @media (min-width: {$et_global.breakpoints.smMin}px) and (max-width: {$et_global.breakpoints.smMax}px) {  #{$et_BaseWidget.cssId} .et-hero-product-image img { max-height:{$et_HeroProduct.maxImageHeight.sm}px; width: auto; } }{/if}
                {if !empty($et_HeroProduct.maxImageHeight.md)} @media (min-width: {$et_global.breakpoints.mdMin}px) and (max-width: {$et_global.breakpoints.mdMax}px) {  #{$et_BaseWidget.cssId} .et-hero-product-image img { max-height:{$et_HeroProduct.maxImageHeight.md}px; width: auto; } }{/if}
                {if !empty($et_HeroProduct.maxImageHeight.lg)} @media (min-width: {$et_global.breakpoints.lgMin}px) and (max-width: {$et_global.breakpoints.lgMax}px) {  #{$et_BaseWidget.cssId} .et-hero-product-image img { max-height:{$et_HeroProduct.maxImageHeight.lg}px; width: auto; } }{/if}
                {if !empty($et_HeroProduct.maxImageHeight.xl)} @media (min-width: {$et_global.breakpoints.xlMin}px) {  #{$et_BaseWidget.cssId} .et-hero-product-image img { max-height:{$et_HeroProduct.maxImageHeight.xl}px; width: auto; } }{/if}
            </style>
        {/if}
        {if isset($et_HeroProduct.shortenToLength) && count($et_HeroProduct.shortenToLength) > 0}
            {include file="widgets/snippets/style_limit_height.tpl" breakpointValues=$et_HeroProduct.shortenToLength targetElement="#{$et_BaseWidget.cssId} .et-hero-product-text"}
        {/if}
    {/block}
    {block name="et-widget-container-inner"}
        {if isset($et_HeroProduct.product)}
            {if isset($et_HeroProduct.product->Bilder[0]->cAltAttribut)}
                {assign var=alt value=$et_HeroProduct.product->Bilder[0]->cAltAttribut|strip_tags|truncate:60}
            {else}
                {assign var=alt value=$et_HeroProduct.product->cName}
            {/if}
            {block name="et-hero-product-headline"}
                {include file="widgets/base/textfield.tpl" value=$et_HeroProduct.headline type="h2" asRow=true classes="et-widget-headline"}
            {/block}
            <div class="et-hero-product-wrapper et-align-horizontal-{$et_HeroProduct.alignmentHorizontal} et-align-vertical-{$et_HeroProduct.alignmentVertical} et-image-align-horizontal-{$et_HeroProduct.imageAlignmentHorizontal} et-image-align-vertical-{$et_HeroProduct.imageAlignmentVertical} et-layout-{$et_HeroProduct.layout} row">
                <div class="et-hero-product-content col-12 col-sm-6" itemscope itemtype="https://schema.org/Product">
                    <meta itemprop="url" content="{$et_HeroProduct.product->cURLFull}">
                    <meta itemprop="name" content="{$et_HeroProduct.product->cName|unescape:"htmlall"|escape:'html'}">
                    {if !empty($et_HeroProduct.product->Bilder[0]->cURLNormal)}
                        <meta itemprop="image" content="{$et_HeroProduct.product->Bilder[0]->cURLNormal}">
                    {/if}
                    <div class="et-hero-product-title">{include file="widgets/base/textfield.tpl" value=$et_HeroProduct.productHeadline fallbackValue=$et_HeroProduct.product->cName type="h2" asRow=false}</div>
                    <div class="et-hero-product-text" itemprop="description" data-line-clamp='{json_encode($et_HeroProduct.shortenToLength)}'>{$et_HeroProduct.text}</div>
                    {block name="et-hero-product-text-read-more"}
                        <div class="et-hero-product-text-read-more 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-hero-product-text-read-less"}{/block}
                    <div class="et-hero-product-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=$et_HeroProduct.product tplscope='gallery' priceLarge=true}
                    </div>
                    {if $et_HeroProduct.linkDisplayMode !== 'none'}
                        <div class="et-hero-product-link">
                            {include file='widgets/base/button.tpl'
                                href=$et_HeroProduct.product->cURLFull
                                title=$alt|unescape:'htmlall'
                                variant="{($et_HeroProduct.linkDisplayMode === 'button') ? 'primary':'link'}"
                                label="{lang key='details' section='global'}"
                            }
                        </div>
                    {/if}
                </div>
                <div class="et-hero-product-image col-12 col-sm-6">
                    <a href="{$et_HeroProduct.product->cURLFull}" title="{$alt|unescape:'htmlall'|escape:'html'}">
                        {$image = $et_HeroProduct.product->Bilder[0]}
                        {image alt=$alt|escape:'html'
                            fluid=true
                            webp=true
                            lazy=$et_BaseWidget.lazyLoadImages
                            src="{$image->cURLGross}"
                            srcset="{$image->cURLMini} {$Einstellungen.bilder.bilder_artikel_mini_breite}w,
                                     {$image->cURLKlein} {$Einstellungen.bilder.bilder_artikel_klein_breite}w,
                                     {$image->cURLNormal} {$Einstellungen.bilder.bilder_artikel_normal_breite}w,
                                     {$image->cURLGross} {$Einstellungen.bilder.bilder_artikel_gross_breite}w"
                            sizes="auto"
                        }
                    </a>
                </div>
            </div>
        {/if}
    {/block}
{/strip}