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

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

            {if !empty($et_CustomerRatings.colorBackgroundContent)}
            #{$et_BaseWidget.cssId} .et-customer-ratings-rating {
                background-color: {$et_CustomerRatings.colorBackgroundContent};
            }
            {/if}
        </style>
    {/if}
    {if isset($et_CustomerRatings.maxLength) && count($et_CustomerRatings.maxLength) > 0}
        {include file="widgets/snippets/style_limit_height.tpl" breakpointValues=$et_CustomerRatings.maxLength targetElement="#{$et_BaseWidget.cssId} .et-customer-ratings-rating-text"}
    {/if}
{/block}

{strip}
    {block name="et-widget-container-inner"}
        {if !empty($et_CustomerRatings.ratings)}
            {if isset($et_CustomerRatings.headline.value) && $et_CustomerRatings.headline.value !== ''}
                {block name="et-customer-ratings-headline"}
                    <div class="et-customer-ratings-headline">
                        {include file="widgets/base/textfield.tpl" value=$et_CustomerRatings.headline type="h2" asRow=true classes="et-widget-headline"}
                    </div>
                {/block}
            {/if}

            {block name="et-customer-ratings-items"}
                <div class="et-customer-ratings-wrapper row">
                    <div class="col p-0">
                        <div class="et-customer-ratings-slider carousel slick-smooth-loading slider-no-preview"
                             data-line-clamp='{block name="et-customer-ratings-items-line-clamp-config"}{json_encode($et_CustomerRatings.maxLength)}{/block}'
                             data-line-clamp-target="{block name="et-customer-ratings-items-line-clamp-target"}.et-customer-ratings-rating-text{/block}"
                             data-slick='{block name="et-customer-ratings-items-slick-config"}{
                            "nextArrow": "#et-ratings-next-{$et_BaseWidget.id}",
                            "prevArrow": "#et-ratings-prev-{$et_BaseWidget.id}",
                            "slidesToShow": 3,
                            "slidesToScroll": 1,
                            "adaptiveHeight": true,
                            "responsive": [
                                { "breakpoint": {$et_global.breakpoints.lgMax}, "settings": { "slidesToShow": 3 } },
                                { "breakpoint": {$et_global.breakpoints.mdMax}, "settings": { "slidesToShow": 2 } },
                                { "breakpoint": {$et_global.breakpoints.smMax}, "settings": { "slidesToShow": 1 } },
                                { "breakpoint": {$et_global.breakpoints.xsMax}, "settings": { "slidesToShow": 1 } }
                            ],
                            "lazyload": "ondemand"
                        }{/block}' id="et-customer-ratings-{$et_BaseWidget.id}" itemscope itemtype="https://schema.org/ItemList">
                            {foreach from=$et_CustomerRatings.ratings item='rating' name='customerRatings'}
                                {block name="et-customer-ratings-rating"}
                                    <div class="et-customer-ratings-rating card" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
                                        <meta itemprop="position" content="{$smarty.foreach.customerRatings.iteration}">
                                        <div class="et-customer-ratings-rating-content card-body" itemprop="item" itemscope itemtype="https://schema.org/Product">
                                            <meta itemprop="url" content="{$rating.Artikel->cURLFull}">
                                            <meta itemprop="name" content="{$rating.Artikel->cName|unescape:"htmlall"|escape:'html'}">
                                            {if !empty($rating.Artikel->Bilder[0]->cURLNormal)}
                                                <meta itemprop="image" content="{$rating.Artikel->Bilder[0]->cURLNormal}">
                                            {/if}
                                            {if count($rating.Artikel->Bilder) > 0}
                                                {block name="et-customer-ratings-rating-image"}
                                                    <a href="{$rating.Artikel->cURLFull}{if $et_CustomerRatings.linkToRatings}#tab-votes{/if}" title="{$rating.Artikel->cName|unescape:'htmlall'|escape:'html'}" class="et-customer-ratings-rating-image-link">
                                                        {image alt=$rating.Artikel->Bilder[0]->cAltAttribut|escape:'html'
                                                            class="et-customer-ratings-rating-image product-image"
                                                            fluid=true
                                                            lazy=$et_BaseWidget.lazyLoadImages
                                                            webp=true
                                                            src="{$rating.Artikel->Bilder[0]->cURLMini}"
                                                            srcset="{$rating.Artikel->Bilder[0]->cURLMini} {$Einstellungen.bilder.bilder_artikel_mini_breite}w,
                                                                    {$rating.Artikel->Bilder[0]->cURLKlein} {$Einstellungen.bilder.bilder_artikel_klein_breite}w,
                                                                    {$rating.Artikel->Bilder[0]->cURLNormal} {$Einstellungen.bilder.bilder_artikel_normal_breite}w,
                                                                    {$rating.Artikel->Bilder[0]->cURLGross} {$Einstellungen.bilder.bilder_artikel_gross_breite}w"
                                                        }
                                                    </a>
                                                {/block}
                                            {/if}

                                            {block name="et-customer-ratings-rating-details"}
                                                <div class="et-customer-ratings-rating-details" itemscope itemprop="review" itemtype="https://schema.org/Review">
                                                    {block name="et-customer-ratings-rating-details-header"}
                                                        <header class="et-customer-ratings-rating-details-header clearfix">
                                                            {block name="et-customer-ratings-rating-details-stars"}
                                                                <div class="et-customer-ratings-rating-stars" itemscope itemprop="reviewRating" itemtype="https://schema.org/Rating">
                                                                    <meta itemprop="ratingValue" content="{$rating.nSterne}"/>
                                                                    <meta itemprop="bestRating" content="5"/>
                                                                    <meta itemprop="worstRating" content="1"/>
                                                                    {include file='productdetails/rating.tpl' stars=$rating.nSterne}
                                                                </div>
                                                            {/block}

                                                            {block name="et-customer-ratings-rating-details-date"}
                                                                <div class="et-customer-ratings-rating-date">
                                                                    <meta itemprop="dateCreated" content="{$rating.dDatum|date_format:'Y-m-d'}">
                                                                    {$rating.dDatum|date_format:'d.m.Y'}
                                                                </div>
                                                            {/block}
                                                        </header>
                                                    {/block}

                                                    {block name="et-customer-ratings-rating-details-author"}
                                                        <div class="et-customer-ratings-rating-author" itemprop="author" itemscope itemtype="https://schema.org/Person">
                                                            <meta itemprop="name" content="{$rating.cName|escape:'html'}">
                                                            {$rating.cName}
                                                        </div>
                                                    {/block}

                                                    {block name="et-customer-ratings-rating-details-text"}
                                                        <div class="et-customer-ratings-rating-text" itemprop="reviewBody">
                                                            {$rating.cText|strip_tags}
                                                        </div>
                                                    {/block}

                                                    {block name="et-customer-ratings-rating-details-link"}
                                                        <div class="et-customer-ratings-rating-link">
                                                            {include file="widgets/base/button.tpl"
                                                                href="{$rating.Artikel->cURLFull}{if $et_CustomerRatings.linkToRatings}#tab-votes{/if}"
                                                                title=$rating.Artikel->cName|unescape:'htmlall'
                                                                iconPosition="right"
                                                                variant="link"
                                                                label="{lang key='details' section='global'}"
                                                            }
                                                        </div>
                                                    {/block}
                                                </div>
                                            {/block}
                                        </div>
                                    </div>
                                {/block}
                            {/foreach}
                        </div>

                        {block name="et-customer-ratings-navigation-arrows"}
                            <div class="et-slider-nav" id="et-ratings-nav-{$et_BaseWidget.id}">
                                {block name="et-customer-ratings-navigation-arrows-prev"}
                                    <div class="et-slider-nav-prev enabled slick-arrow slick-hidden" id="et-ratings-prev-{$et_BaseWidget.id}">
                                        <i class="{et_getIcon key='sliderPrevious'}"></i>
                                    </div>
                                {/block}

                                {block name="et-customer-ratings-navigation-arrows-next"}
                                    <div class="et-slider-nav-next enabled slick-arrow slick-hidden" id="et-ratings-next-{$et_BaseWidget.id}">
                                        <i class="{et_getIcon key='sliderNext'}"></i>
                                    </div>
                                {/block}
                            </div>
                        {/block}
                    </div>
                </div>
            {/block}
        {/if}
    {/block}
{/strip}