{namespace media=Neos\Media\ViewHelpers}
{namespace neos=Neos\Neos\ViewHelpers}
{namespace vh=Newland\NeosViewHelpers\ViewHelpers}

<f:if condition="{neos:rendering.inBackend()}">
    <f:then>
        <span class="c-slider-teaser o-grid__item h-64">
            <f:render section="slider-teaser-content"></f:render>
        </span>
    </f:then>
    <f:else>
        <f:if condition="{link}">
            <f:then>
                <div class="tb-swiper__slide">
                    <a
                        href="{link}"
                        title="{linkTitle}"
                        class="c-slider-teaser c-slider-teaser--linked"
                        {f:if(condition: openLinkInNewWindow, then: 'target="_blank" rel="noopener noreferrer"')}
                        {f:if(condition: nodesRoundEdges, then: "style='border-radius: 10px;'", else: '')}>

                        <f:render section="slider-teaser-content"></f:render>
                    </a>
                </div>
            </f:then>
            <f:else>
                <div class="tb-swiper__slide">
                    <span class="c-slider-teaser">
                        <f:render section="slider-teaser-content"></f:render>
                    </span>
                </div>
            </f:else>
        </f:if>
    </f:else>
</f:if>

<f:section name="slider-teaser-content">
    <figure class="c-slider-teaser__content {f:if(condition: textHasWhiteBackground, then: 'c-slider-teaser--gradient-0', else: '')} {f:if(condition: nodesRoundEdges, then: 'c-slider-teaser__content-rounded') {gradientColor} {gradientTransparency}">
        <noscript>
            <img src="{neos.media:uri.image(image: image, maximumWidth: 640)}"
                 alt="{alternativeText}"
                 class="c-slider-teaser__image"
                 loading="lazy"
                 {f:if(condition: focusPoint, then: "style='object-position: {focusPoint};'", else: '')}>

        </noscript>
        <img data-src="{neos.media:uri.image(image: image, maximumWidth: 640)}"
             alt="{alternativeText}"
             class="c-slider-teaser__image lazyload"
             {f:if(condition: focusPoint, then: "style='object-position: {focusPoint};'", else: '')}>

        <f:render partial="Copyright" arguments="{_all}"></f:render>

        <figcaption class="c-slider-teaser__text{f:if(condition: '{textHasWhiteBackground}', then: ' c-slider-teaser__text--white-background', else: '')}">
            <f:if condition="{neos:rendering.inBackend()}">
                <f:then>
                    {neos:contentElement.editable(property: 'topline', class: 'c-slider-teaser__topline', tag: 'p')}
                    {neos:contentElement.editable(property: 'title', class: 'c-slider-teaser__title', tag: 'h3')}
                    {neos:contentElement.editable(property: 'subline', class: 'c-slider-teaser__subline', tag: 'p')}
                </f:then>
                <f:else>
                    <f:if condition="{topline -> vh:string.notEmpty()}">
                        {neos:contentElement.editable(property: 'topline', class: 'c-slider-teaser__topline', tag: 'p')}
                    </f:if>
                    <f:if condition="{title -> vh:string.notEmpty()}">
                        {neos:contentElement.editable(property: 'title', class: 'c-slider-teaser__title', tag: 'h3')}
                    </f:if>
                    <f:if condition="{subline -> vh:string.notEmpty()}">
                        {neos:contentElement.editable(property: 'subline', class: 'c-slider-teaser__subline', tag: 'p')}
                    </f:if>
                </f:else>
            </f:if>
        </figcaption>
    </figure>
</f:section>