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

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

                {if !empty($et_ProductSlider.colorBox)}
                    #{$et_BaseWidget.cssId} .et-product-slider-product {
                        background-color: {$et_ProductSlider.colorBox};
                    }
                {/if}

                {if !empty($et_ProductSlider.colorArrows)}
                    #{$et_BaseWidget.cssId} .et-slider-nav {
                        color: {$et_ProductSlider.colorArrows};
                    }
                {/if}

                {if !empty($et_ProductSlider.colorSpecialPrice)}
                    #{$et_BaseWidget.cssId} .productbox-price.special-price {
                        color: {$et_ProductSlider.colorSpecialPrice};
                    }
                {/if}
            </style>
        {/if}
    {/block}

    {block name="et-widget-container-inner"}
        {if !empty($et_ProductSlider.products) || !empty($et_ProductSlider.advertisingBoxes)}
            {if isset($et_ProductSlider.headline.value) && $et_ProductSlider.headline.value !== ''}
                {block name="et-product-slider-headline"}
                    <div class="et-product-slider-headline">
                        {include file="widgets/base/textfield.tpl" value=$et_ProductSlider.headline type="h2" asRow=true classes="et-widget-headline"}
                    </div>
                {/block}
            {/if}
            {block name="et-product-slider-text-before"}
                {if !empty($et_ProductSlider.textBefore.value)}{include file="widgets/base/textfield.tpl" value=$et_ProductSlider.textBefore type='div' classes="et-text-before"}{/if}
            {/block}
            {block name="et-product-slider-items"}
                <div class="et-product-slider-wrapper et-hover-style-{$et_ProductSlider.hoverStyle} row">
                    <div class="col p-0">
                        {include file="snippets/product_slider.tpl"
                            productlist=$et_ProductSlider.products
                            autoSlideInterval=$et_ProductSlider.autoSlideInterval
                            slidesToShow=$et_ProductSlider.slideCount
                            slidesToScroll=$et_ProductSlider.slidesToScroll
                            sliderId=$et_BaseWidget.id
                            hideManufacturers=$et_ProductSlider.hideManufacturers
                            hideRatings=$et_ProductSlider.hideRatings
                            hideAvailability=$et_ProductSlider.hideAvailability
                            lazyLoadImages=$et_BaseWidget.lazyLoadImages
                            infoBoxes=$et_ProductSlider.advertisingBoxes
                        }
                    </div>
                </div>
            {/block}
            {block name="et-product-slider-text-after"}
                {if !empty($et_ProductSlider.textAfter.value)}{include file="widgets/base/textfield.tpl" value=$et_ProductSlider.textAfter type='div' classes="et-text-after"}{/if}
            {/block}
            {block name="et-product-slider-related-link"}
                {if !empty($et_ProductSlider.link)}
                    {include file="widgets/snippets/slider_related_link.tpl" context="product_slider" link=$et_ProductSlider.link label=$et_ProductSlider.linkLabel displayMode=$et_ProductSlider.linkDisplayMode alignmentHorizontal=$et_ProductSlider.linkAlignmentHorizontal}
                {/if}
            {/block}
        {/if}
    {/block}
{/strip}