{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">
                <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"
                        {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">
                        <f:render section="big-teaser-content" arguments="{_all}" />
                    </div>
                </f:else>
            </f:if>
        </f:else>
    </f:if>
</figure>

<f:section name="big-teaser-content">
    <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: '')} />

            <figcaption class="c-big-teaser__caption">
                {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}")}
            </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>

            <figcaption class="c-big-teaser__caption">
                <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}")}
                </f:if>
            </figcaption>
        </f:else>
    </f:if>
</f:section>
