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

<f:if condition="{neos:rendering.inBackend()}">
    <f:then>
        <div class="c-text-teaser {f:if(condition: '{roundEdges}', then: 'c-text-teaser--round-edges', else: '')}">
            <f:render section="gridTeaserContent"></f:render>
        </div>
    </f:then>
    <f:else>
        <f:if condition="{link}">
            <f:then>
                <a
                    href="{link}"
                    title="{linkTitle}"
                    class="c-text-teaser {f:if(condition: '{roundEdges}', then: 'c-text-teaser--round-edges', else: '')}"
                    {f:if(condition: openLinkInNewWindow, then: 'target="_blank" rel="noopener noreferrer"')}
                >
                    <f:render section="gridTeaserContent"></f:render>
                </a>
            </f:then>
            <f:else>
                <div class="c-text-teaser {f:if(condition: '{roundEdges}', then: 'c-text-teaser--round-edges', else: '')}">
                    <f:render section="gridTeaserContent"></f:render>
                </div>
            </f:else>
        </f:if>
    </f:else>
</f:if>

<f:section name="gridTeaserContent">
    <f:if condition="{image}">
        <div class="c-text-teaser__image-wrapper {f:if(condition: '{roundEdges}', then: 'c-text-teaser--round-edges', else: '')}">
            <noscript>
                <img src="{neos.media:uri.image(image: image, maximumWidth: 640)}"
                     alt="{alternativeText}"
                     class="c-text-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-text-teaser__image lazyload"
                 {f:if(condition: focusPoint, then: "style='object-position: {focusPoint};'", else: '')}>

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

    <div class="c-text-teaser__caption {f:if(condition: '{roundEdges}', then: 'c-text-teaser--round-edges', else: '')}">
        <f:if condition="{neos:rendering.inBackend()}">
            <f:then>
                {neos:contentElement.editable(property: 'topline', class: 'c-text-teaser__topline', tag: 'p')}
                {neos:contentElement.editable(property: 'title', class: 'c-text-teaser__headline', tag: 'p')}
                {neos:contentElement.editable(property: 'text', class: 'c-text-teaser__subline', tag: 'p')}
                {neos:contentElement.editable(property: 'price', class: 'c-text-teaser__price', tag: 'p')}
            </f:then>
            <f:else>
                <f:if condition="{topline -> vh:string.notEmpty()}">
                    {neos:contentElement.editable(property: 'topline', class: 'c-text-teaser__topline', tag: 'p')}
                </f:if>
                <f:if condition="{title -> vh:string.notEmpty()}">
                    {neos:contentElement.editable(property: 'title', class: 'c-text-teaser__headline', tag: 'p')}
                </f:if>
                <f:if condition="{text -> vh:string.notEmpty()}">
                    {neos:contentElement.editable(property: 'text', class: 'c-text-teaser__subline', tag: 'p')}
                </f:if>
                <f:if condition="{price -> vh:string.notEmpty()}">
                    {neos:contentElement.editable(property: 'price', class: 'c-text-teaser__price', tag: 'p')}
                </f:if>
            </f:else>
        </f:if>
    </div>
</f:section>