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

<figure class="c-big-teaser {marginTop}">
    <f:if condition="{neos:rendering.inBackend()}">
        <f:then>
            <div class="c-big-teaser__content-wrapper {gradientColor} {gradientTransparency}">
                <f:render section="big-teaser-content" arguments="{_all}"></f:render>
            </div>
        </f:then>
        <f:else>
            <f:if condition="{link}">
                <f:then>
                    <a href="{link}"
                        class="c-big-teaser__content-wrapper {gradientColor} {gradientTransparency}"
                        {f:if(condition: openLinkInNewWindow, then: 'target="_blank" rel="noopener noreferrer"')}>

                        <f:render section="big-teaser-content" arguments="{_all}" />
                    </a>
                </f:then>
                <f:else>
                    <div class="c-big-teaser__content-wrapper {gradientColor} {gradientTransparency}">
                        <f:render section="big-teaser-content" arguments="{_all}" />
                    </div>
                </f:else>
            </f:if>
        </f:else>
    </f:if>


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


</figure>

<f:section name="big-teaser-content">
    <f:debug>{focusPoint}</f:debug>
    <f:if condition="{neos:rendering.inBackend()}">
        <f:then>

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

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

            <figcaption class="c-big-teaser__caption {contentPosition}">
                {neos:contentElement.editable(property: 'topline', class: 'c-big-teaser__topline', tag: 'p')}
                {neos:contentElement.editable(property: 'title', class: 'c-big-teaser__title', tag: 'p')}
                {neos:contentElement.editable(property: 'subline', class: 'c-big-teaser__subline', tag: 'p')}
                {neos:contentElement.editable(property: 'buttonText', tag: 'span', class="c-big-teaser__button c-button c-button--outlined {buttonType} {buttonColor}")}
            </figcaption>
        </f:then>
        <f:else>
            <f:if condition="{badge -> vh:string.notEmpty()}">
            </f:if>

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

            <noscript>
                <img src="{neos.media:uri.image(image: image)}"
                        alt="{alternativeText}"
                        class="c-big-teaser__image"
                        loading="lazy"
                        {f:if(condition: focusPoint, then: "style='object-position: {focusPoint};'", else: '')}>

            </noscript>

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

            <figcaption class="c-big-teaser__caption {contentPosition}">
                <f:if condition="{topline -> vh:string.notEmpty()}">
                    {neos:contentElement.editable(property: 'topline', class: 'c-big-teaser__topline', tag: 'p')}
                </f:if>

                <f:if condition="{title -> vh:string.notEmpty()}">
                    {neos:contentElement.editable(property: 'title', class: 'c-big-teaser__title', tag: 'p')}
                </f:if>

                <f:if condition="{subline -> vh:string.notEmpty()}">
                    {neos:contentElement.editable(property: 'subline', class: 'c-big-teaser__subline', tag: 'p')}
                </f:if>
                <f:if condition="{buttonText -> vh:string.notEmpty()} && {link}">
                    {neos:contentElement.editable(property: 'buttonText', tag: 'span', class="c-big-teaser__button c-button c-button--outlined {buttonType} {buttonColor}")}
                </f:if>
            </figcaption>
        </f:else>
    </f:if>
</f:section>