{namespace media=Neos\Media\ViewHelpers}
{namespace neos=Neos\Neos\ViewHelpers}

<f:if condition="{neos:rendering.inBackend()}">
    <f:then>
        <div class="c-grid-teaser{f:if(condition: '{image}', then: '', else: ' c-grid-teaser--no-image')} {backgroundColor}">
            <f:render section="gridTeaserImage"></f:render>
            <f:render section="gridTeaserCaption"></f:render>
        </div>
    </f:then>
    <f:else>
        <f:if condition="{link}">
            <f:then>
                <a href="{link}"
                    class="c-grid-teaser{f:if(condition: '{image}', then: '', else: ' c-grid-teaser--no-image')} {backgroundColor}"
                    {f:if(condition: linkTitle, then: 'title="{linkTitle}"', else: 'title="{topline}"')}
                    {f:if(condition: openLinkInNewWindow, then: 'target="_blank"')}>
                
                    <f:render section="gridTeaserImage"></f:render>
                    <f:render section="gridTeaserCaption"></f:render>
                </a>
            </f:then>
            <f:else>
                <div class="c-grid-teaser{f:if(condition: '{image}', then: '', else: ' c-grid-teaser--no-image')} {backgroundColor}">
                    <f:render section="gridTeaserImage"></f:render>
                    <f:render section="gridTeaserCaption"></f:render>
                </div>
            </f:else>
        </f:if>
        
    </f:else>
</f:if>

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

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

        <f:else>
            <f:if condition="{gridTeaserSilhouette}">
                <noscript>
                    <img src="{neos.media:uri.image(image: image, maximumWidth: imageMaximumWidth)}" alt="{alternativeText}" class="c-grid-teaser__silhouette" />
                </noscript>

                <img data-src="{neos.media:uri.image(image: gridTeaserSilhouette, maximumWidth: imageMaximumWidth)}" alt="{alternativeText}" class="c-grid-teaser__silhouette lazyload" />
            </f:if>
        </f:else>
    </f:if>
</f:section>

<f:section name="gridTeaserCaption">
    <div class="c-grid-teaser__caption">
        <f:if condition="{toplineIsUppercase}">
            <f:then>
                {neos:contentElement.editable(property: 'topline', class: 'c-grid-teaser__topline c-grid-teaser__topline-uppercase', tag: 'p')}
            </f:then>
            <f:else>
                {neos:contentElement.editable(property: 'topline', class: 'c-grid-teaser__topline', tag: 'p')}
            </f:else>
        </f:if>
        {neos:contentElement.editable(property: 'headline', class: 'c-grid-teaser__headline', tag: 'h3')}

        <f:if condition="{neos:rendering.inBackend()}">
            <f:then>
                {neos:contentElement.editable(property: 'text', class: 'c-grid-teaser__subline', tag: 'p')}
            </f:then>
            <f:else>
                <f:if condition="{text} && {text} != '&nbsp;'">
                    {neos:contentElement.editable(property: 'text', class: 'c-grid-teaser__subline', tag: 'p')}
                </f:if>
            </f:else>
        </f:if>
        <f:if condition="{neos:rendering.inBackend()}">
            <f:then>
                {neos:contentElement.editable(property: 'price', class: 'c-grid-teaser__price', tag: 'p')}
            </f:then>
            <f:else>
                <f:if condition="{price} && {price} != '&nbsp;'">
                    {neos:contentElement.editable(property: 'price', class: 'c-grid-teaser__price', tag: 'p')}
                </f:if>
            </f:else>
        </f:if>
    </div>
</f:section>