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

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

                {if !empty($et_News.colorBackgroundContent)}
                #{$et_BaseWidget.cssId} .et-news-items .card {
                    background-color: {$et_News.colorBackgroundContent};
                }
                {/if}
            </style>
        {/if}
        {if isset($et_News.maxLengthPreview) && count($et_News.maxLengthPreview) > 0}
            {include file="widgets/snippets/style_limit_height.tpl" breakpointValues=$et_News.maxLengthPreview targetElement="#{$et_BaseWidget.cssId} .et-news-item-preview"}
        {/if}
    {/block}

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

                    <div class="et-news-overview text-align-{$et_News.headline.textAlignment}">
                        {include file="widgets/base/button.tpl"
                            href="{get_static_route id='news.php'}"
                            title="{lang key='overview' section='news'}"
                            variant="link"
                            iconPosition="right"
                            label="{lang key='overview' section='news'}"
                        }
                    </div>
                </div>
            {/block}
        {/if}

        {block name="et-news-items"}
            {$newsCount = count($et_News.news)}
            {if isset($newsCount) && $newsCount > 0}
                <div class="et-news-items et-hover-style-{$et_News.hoverStyle}">
                    <div class="row">
                        <div class="col p-0">
                            <div class="et-news-items-slider carousel slick-smooth-loading slider-no-preview" id="et-news-{$et_BaseWidget.id}"
                                {if $et_News.previewEnabled}
                                    data-line-clamp='{block name="et-news-items-line-clamp-config"}{json_encode($et_News.maxLengthPreview)}{/block}'
                                    data-line-clamp-target="{block name="et-news-items-line-clamp-target"}.et-news-item-preview{/block}"
                                {/if}
                                data-slick='{block name="et-news-items-slick-config"}{
                                    "nextArrow": "#et-news-next-{$et_BaseWidget.id}",
                                    "prevArrow": "#et-news-prev-{$et_BaseWidget.id}",
                                    "slidesToShow": {if !empty($et_News.itemCount.xl) && $et_News.itemCount.xl > 0}{min($et_News.itemCount.xl, $newsCount)}{else}5{/if},
                                    "slidesToScroll": 1,
                                    "adaptiveHeight": true,
                                    "responsive": [
                                        { "breakpoint": {$et_global.breakpoints.lgMax}, "settings": { "slidesToShow": {if !empty($et_News.itemCount.lg) && $et_News.itemCount.lg > 0}{min($et_News.itemCount.lg, $newsCount)}{else}4{/if}}},
                                        { "breakpoint": {$et_global.breakpoints.mdMax}, "settings": { "slidesToShow": {if !empty($et_News.itemCount.md) && $et_News.itemCount.md > 0}{min($et_News.itemCount.md, $newsCount)}{else}3{/if}}},
                                        { "breakpoint": {$et_global.breakpoints.smMax}, "settings": { "slidesToShow": {if !empty($et_News.itemCount.sm) && $et_News.itemCount.sm > 0}{min($et_News.itemCount.sm, $newsCount)}{else}2{/if}}},
                                        { "breakpoint": {$et_global.breakpoints.xsMax}, "settings": { "slidesToShow": {if !empty($et_News.itemCount.xs) && $et_News.itemCount.xs > 0}{min($et_News.itemCount.xs, $newsCount)}{else}1{/if}}}
                                    ],
                                    "lazyload": "ondemand"
                                }{/block}'>
                                {foreach from=$et_News.news item="news" name="newsItemLoop"}
                                    {block name="et-news-items-post"}
                                        <div class="et-news-item card">
                                            {if !empty($news->getPreviewImage())}
                                                {block name="et-news-items-post-image"}
                                                    <a href="{$news->getUrl()}" title="{$news->getTitle()}" class="link-discreet">
                                                        {include file="snippets/image.tpl"
                                                            item=$news
                                                            square=false
                                                            webp=true
                                                            fluid=true
                                                            lazy=true
                                                            alt=$news->getTitle()
                                                            class="et-news-item-image card-img-top"
                                                        }
                                                    </a>
                                                {/block}
                                            {/if}

                                            {block name="et-news-items-post-content"}
                                                <div class="et-news-item-content card-body">
                                                    {if $et_News.dateEnabled || ($et_News.authorEnabled && $news->getAuthor() !== null)}
                                                        {block name="et-news-items-post-info"}
                                                            <div class="et-news-item-info">
                                                                {if $et_News.dateEnabled}<div class="et-news-item-date">{$news->getDateValidFrom()->format('d.m.Y')}</div>{/if}
                                                                {if $et_News.authorEnabled && $news->getAuthor() !== null}<div class="et-news-item-author">{$news->getAuthor()->cName}</div>{/if}
                                                            </div>
                                                        {/block}
                                                    {/if}
                                                    {block name="et-news-items-title"}
                                                        <strong class="et-news-item-title card-title">{$news->getTitle()}</strong>
                                                    {/block}
                                                    {if $et_News.previewEnabled}{block name="et-news-items-preview"}<p class="et-news-item-preview card-text">{$news->getPreview()}</p>{/block}{/if}
                                                    {if $et_News.linkDisplayType !== 'none'}
                                                        {block name="et-news-items-post-content-more"}
                                                            <div class="et-news-item-link">
                                                                {include file="widgets/base/button.tpl"
                                                                    href=$news->getUrl()
                                                                    title=$news->getTitle()
                                                                    iconPosition="{($et_News.linkDisplayType === 'button') ? 'default' : 'right'}"
                                                                    variant="{($et_News.linkDisplayType === 'button') ? 'primary' : 'link'}"
                                                                    label="{lang key='moreLink' section='news'}"
                                                                }
                                                            </div>
                                                        {/block}
                                                    {/if}
                                                </div>
                                            {/block}
                                        </div>
                                    {/block}
                                {/foreach}
                            </div>

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

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