{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: ' c-grid-teaser--has-image', else: ' c-grid-teaser--no-image')} {f:if(condition: '{roundEdges}', then: 'c-grid-teaser--round-edges', else: '')} {f:if(condition: '{showBorder}', then: 'c-grid-teaser--bordered', else: '')} {f:if(condition: '{textColor}', then: 'c-grid-teaser--text-color', else: '')} {f:if(condition: '{textHasWhiteBackground}', then: 'c-grid-teaser--gradient-0', else: '')} {backgroundColor} {gradientColor} {gradientTransparency}">
            <f:render section="gridTeaserImage"></f:render>
            <f:render section="gridTeaserCaption"></f:render>

            <f:if condition="{badge}">
                <f:render section="badge"></f:render>
            </f:if>
        </div>
    </f:then>
    <f:else>
        <f:if condition="{link}">
            <f:then>
                <f:if condition="{showLinkPopup}">
                    <f:then>
                        <div
                            data-target-enhancement
                            data-target-enhancement-targets.0="[data-link-popup-{node.identifier}]"
                            data-target-enhancement-plugins.0.name="toggle-aria-expanded"
                            data-target-enhancement-exclusive-group="link-popup"
                            class="c-grid-teaser{f:if(condition: '{image}', then: ' c-grid-teaser--has-image', else: ' c-grid-teaser--no-image')} {f:if(condition: '{roundEdges}', then: 'c-grid-teaser--round-edges', else: '')} {f:if(condition: '{showBorder}', then: 'c-grid-teaser--bordered', else: '')} {f:if(condition: '{textColor}', then: 'c-grid-teaser--text-color', else: '')} {f:if(condition: '{textHasWhiteBackground}', then: 'c-grid-teaser--gradient-0', else: '')} {backgroundColor} {gradientColor} {gradientTransparency}">
                            <f:render section="gridTeaserImage"></f:render>
                            <f:render section="gridTeaserCaption"></f:render>

                            <f:if condition="{badge}">
                                <f:render section="badge"></f:render>
                            </f:if>
                        </div>
                        <f:render partial="LinkPopUp" arguments="{_all}" />
                    </f:then>
                    <f:else>
                        <a
                            href="{link}"
                            class="c-grid-teaser{f:if(condition: '{image}', then: ' c-grid-teaser--has-image', else: ' c-grid-teaser--no-image')} {f:if(condition: '{roundEdges}', then: 'c-grid-teaser--round-edges', else: '')} {f:if(condition: '{showBorder}', then: 'c-grid-teaser--bordered', else: '')} {f:if(condition: '{textColor}', then: 'c-grid-teaser--text-color', else: '')} {f:if(condition: '{textHasWhiteBackground}', then: 'c-grid-teaser--gradient-0', else: '')} {backgroundColor} {gradientColor} {gradientTransparency}"
                            {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>

                            <f:if condition="{badge}">
                                <f:render section="badge"></f:render>
                            </f:if>
                        </a>
                    </f:else>
                </f:if>
            </f:then>
            <f:else>
                <div class="c-grid-teaser{f:if(condition: '{image}', then: ' c-grid-teaser--has-image', else: ' c-grid-teaser--no-image')} {f:if(condition: '{roundEdges}', then: 'c-grid-teaser--round-edges', else: '')} {f:if(condition: '{showBorder}', then: 'c-grid-teaser--bordered', else: '')} {f:if(condition: '{textColor}', then: 'c-grid-teaser--text-color', else: '')} {f:if(condition: '{textHasWhiteBackground}', then: 'c-grid-teaser--gradient-0', else: '')} {backgroundColor} {gradientColor} {gradientTransparency}">
                    <f:render section="gridTeaserImage"></f:render>
                    <f:render section="gridTeaserCaption"></f:render>

                    <f:if condition="{badge}">
                        <f:render section="badge"></f:render>
                    </f:if>
                </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:render partial="Copyright" arguments="{_all}"></f:render>
        </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:if condition="{gridTeaserDecoration}">
        <f:if condition="{gridTeaserDecorationAlignment} == 'stretched'">
            <f:then>
                <img class="c-grid-teaser__decoration" src="{neos.media:uri.image(image: gridTeaserDecoration)}" style="width: 100%;">
            </f:then>
            <f:else>
                <f:if condition="{gridTeaserDecorationAlignment} == 'pattern'">
                    <f:then>
                        <div class="c-grid-teaser__decoration" style="background-image: url('{neos.media:uri.image(image: gridTeaserDecoration)}');">
                            <img src="{neos.media:uri.image(image: gridTeaserDecoration)}" style="visibility: hidden;">
                        </div>
                    </f:then>
                    <f:else>
                        <img src="{neos.media:uri.image(image: gridTeaserDecoration)}" class="c-grid-teaser__decoration">
                    </f:else>
                </f:if>
            </f:else>
        </f:if>
    </f:if>
</f:section>

<f:section name="gridTeaserCaption">
    <div class="c-grid-teaser__caption{f:if(condition: '{textHasWhiteBackground}', then: ' c-grid-teaser__caption--white-background', else: '')}">
        <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: 'p')}

        <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>

<f:section name="badge">
    <img src="{neos.media:uri.image(image: badge, maximumWidth: imageMaximumWidth)}" alt="{alternativeText}" class="c-grid-teaser__badge{f:if(condition: '{removeBadgeSpacing}', then: ' c-grid-teaser__badge--no-spacing', else: '')}{f:if(condition: '{teaserBadgeAlignLeft}', then: ' c-grid-teaser__badge--left', else: '')}">
</f:section>