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

<figure class="c-big-teaser-parallax {marginTop}">
    <f:if condition="{neos:rendering.inBackend()}">
        <f:then>
            <div
                class="c-big-teaser-parallax__content-wrapper {gradientColor} {gradientTransparency}"
                style="background-image: url('{neos.media:uri.image(image: image)}');
                       {f:if(condition: focusPoint, then: 'background-position: {focusPoint};', else: '')}"
                >
                    <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-parallax__content-wrapper paraxify"
                        style="background-image: url('{neos.media:uri.image(image: image)}');
                               {f:if(condition: focusPoint, then: 'background-position: {focusPoint};', else: '')}"
                        >
                        {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-parallax__content-wrapper paraxify"
                        style="background-image: url('{neos.media:uri.image(image: image)}');
                               {f:if(condition: focusPoint, then: 'background-position: {focusPoint};', else: '')}"
                        >
                            <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>
            <f:render partial="Copyright" arguments="{_all}"></f:render>

            <figcaption class="c-big-teaser-parallax__caption {contentPosition}">
                {neos:contentElement.editable(property: 'topline', class: 'c-big-teaser-parallax__topline', tag: 'p')}
                {neos:contentElement.editable(property: 'title', class: 'c-big-teaser-parallax__title', tag: 'p')}
                {neos:contentElement.editable(property: 'subline', class: 'c-big-teaser-parallax__subline', tag: 'p')}
                {neos:contentElement.editable(property: 'buttonText', tag: 'span', class="c-big-teaser-parallax__button c-button c-button--outlined {buttonType} {buttonColor}")}
            </figcaption>
        </f:then>
        <f:else>
            <f:if condition="{badge -> vh:string.notEmpty()}"></f:if>

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

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

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

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