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

{strip}
    {$basketBoxBackground = 'default'}

    {block name="et-widget-inline-styles"}
        {if $et_ProductDetailHeader.customColorsEnabled}
            {* Custom Colors *}
            <style type="text/css">
                #{$et_BaseWidget.cssId}.bg-fullsize,
                #{$et_BaseWidget.cssId}.bg-boxed .container {
                    {if !empty($et_ProductDetailHeader.colorBackground)}background-color: {$et_ProductDetailHeader.colorBackground};{/if}
                    {if !empty($et_ProductDetailHeader.colorFont)}color: {$et_ProductDetailHeader.colorFont};{/if}
                }

                #{$et_BaseWidget.cssId} .product-offer {
                    {if !empty($et_ProductDetailHeader.colorBasketBox)}background-color: {$et_ProductDetailHeader.colorBasketBox};{/if}
                    {if !empty($et_ProductDetailHeader.colorBasketBoxFont)}color: {$et_ProductDetailHeader.colorBasketBoxFont};{/if}
                }
            </style>

            {* If the basket box does not stand out with a different background, we align it with the rest! *}
            {if !$et_ProductDetailHeader.customColorsEnabled || empty($et_ProductDetailHeader.colorBasketBox) || ($et_ProductDetailHeader.colorBasketBox === $et_ProductDetailHeader.colorBackground)}
                {$basketBoxBackground = 'same'}
            {else}
                {$basketBoxBackground = 'different'}
            {/if}
        {/if}
    {/block}

    {block name="et-widget-container-inner"}
        <div class="row et-productdetail-wrapper et-thumbs-position-{$et_ProductDetailHeader.thumbsPosition}">
            <div class="col">
                {include file='productdetails/details.tpl'
                    thumbsPosition=$et_ProductDetailHeader.thumbsPosition
                    basketBoxBackground=$basketBoxBackground
                    maxLengthShortDescription=$et_ProductDetailHeader.maxLengthShortDescription
                    manufacturerLayout=$et_ProductDetailHeader.manufacturerLayout
                    manufacturerAlignmentHorizontal=$et_ProductDetailHeader.manufacturerAlignmentHorizontal
                    variationHoverEnabled=$et_ProductDetailHeader.variationHoverEnabled
                    lazyLoadImages=$et_BaseWidget.lazyLoadImages
                    configItemDescriptionLimit=$et_ProductDetailHeader.configItemDescriptionLimit
                }
            </div>
        </div>
        {block name='productdetails-details-include-popups'}
            <div id="article_popups">
                {include file='productdetails/popups.tpl' lazyLoadImages=$et_BaseWidget.lazyLoadImages}
            </div>
        {/block}
    {/block}
{/strip}