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

<f:if condition="{neos:rendering.inBackend()}">
    <f:then>
        <div class="c-button-teaser{f:if(condition: '{image}', then: '', else: ' c-button-teaser--no-image')} {f:if(condition: '{roundEdges}', then: 'c-button-teaser--round-edges', else: '')} {f:if(condition: '{showBorder}', then: 'c-button-teaser--bordered', else: '')} {backgroundColor} {gradientColor} {gradientTransparency}">
            <f:render section="buttonTeaserImage"></f:render>
            <f:render section="buttonTeaserCaption"></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-button-teaser{f:if(condition: '{image}', then: '', else: ' c-button-teaser--no-image')} {f:if(condition: '{roundEdges}', then: 'c-button-teaser--round-edges', else: '')} {f:if(condition: '{showBorder}', then: 'c-button-teaser--bordered', else: '')} {backgroundColor} {gradientColor} {gradientTransparency}">
                            <f:render section="buttonTeaserImage"></f:render>
                            <f:render section="buttonTeaserCaption"></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-button-teaser{f:if(condition: '{image}', then: '', else: ' c-button-teaser--no-image')} {f:if(condition: '{roundEdges}', then: 'c-button-teaser--round-edges', else: '')} {f:if(condition: '{showBorder}', then: 'c-button-teaser--bordered', else: '')} {backgroundColor} {gradientColor} {gradientTransparency}"
                            {f:if(condition: linkTitle, then: 'title="{linkTitle}"')}
                            {f:if(condition: openLinkInNewWindow, then: 'target="_blank"')}
                        >

                            <f:render section="buttonTeaserImage"></f:render>
                            <f:render section="buttonTeaserCaption"></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-button-teaser{f:if(condition: '{image}', then: '', else: ' c-button-teaser--no-image')} {f:if(condition: '{roundEdges}', then: 'c-button-teaser--round-edges', else: '')} {f:if(condition: '{showBorder}', then: 'c-button-teaser--bordered', else: '')} {backgroundColor} {gradientColor} {gradientTransparency}">
                    <f:render section="buttonTeaserImage"></f:render>
                    <f:render section="buttonTeaserCaption"></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="buttonTeaserImage">
    <f:if condition="{image}">
        <f:then>
            <noscript>
                <img src="{neos.media:uri.image(image: image, maximumWidth: imageMaximumWidth)}" alt="{alternativeText}" class="c-button-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-button-teaser__image lazyload"
            {f:if(condition: focusPoint, then: "style='object-position: {focusPoint};'", else: '')} />

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

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

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

    <f:if condition="{buttonTeaserDecoration}">
        <f:if condition="{buttonTeaserDecorationAlignment} == 'stretched'">
            <f:then>
                <img class="c-button-teaser__decoration" src="{neos.media:uri.image(image: buttonTeaserDecoration)}" style="width: 100%;">
            </f:then>
            <f:else>
                <f:if condition="{buttonTeaserDecorationAlignment} == 'pattern'">
                    <f:then>
                        <div class="c-button-teaser__decoration" style="background-image: url('{neos.media:uri.image(image: buttonTeaserDecoration)}');">
                            <img src="{neos.media:uri.image(image: buttonTeaserDecoration)}" style="visibility: hidden;">
                        </div>
                    </f:then>
                    <f:else>
                        <img src="{neos.media:uri.image(image: buttonTeaserDecoration)}" class="c-button-teaser__decoration">
                    </f:else>
                </f:if>
            </f:else>
        </f:if>
    </f:if>
</f:section>

<f:section name="buttonTeaserCaption">
    <div class="c-button-teaser__caption">
        {neos:contentElement.editable(property: 'headline', class: 'c-button-teaser__headline', tag: 'p')}

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

        {neos:contentElement.editable(property: 'buttonText', tag: 'span', class="c-button-teaser__button c-button c-button--outlined {buttonType} {buttonColor}")}
    </div>
</f:section>

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