{namespace neos=Neos\Neos\ViewHelpers}

<div class="c-hero tb-swiper__slide">
    <img class="c-hero__image" sizes="(max-width: 1920px) 100vw, 1920px"
        srcset="{neos.media:uri.image(image: image, maximumWidth: 1600)} 1600w,
                {neos.media:uri.image(image: image, maximumWidth: 800)}  800w"
        src="{neos.media:uri.image(image: image)}" alt="{alternativeText}"
        {f:if(condition: focusPoint, then: "style='object-position: {focusPoint};'", else: '')} />

    <f:if condition="{neos:rendering.inBackend()} || {title}">
        <div class="c-hero__text">
            {neos:contentElement.editable(property: 'title', tag: 'h2', class: 'c-hero__title')}
            <f:if condition="{neos:rendering.inBackend()} || {subtitle}">
                {neos:contentElement.editable(property: 'subtitle', tag: 'p', class: 'c-hero__subtitle')}
            </f:if>
            <f:if condition="{neos:rendering.inBackend()}">
                <f:then>
                    <a href="#0" class="c-hero__button c-button">
                        {neos:contentElement.editable(property: 'buttonText', tag: 'span')}
                    </a>
                </f:then>
                <f:else>
                    <f:if condition="{buttonLink}">
                        <a href="{buttonLink}" class="c-hero__button c-button {buttonType}" {f:if(condition: buttonOpenLinkInNewWindow,
                            then: 'target="_blank" rel="noopener noreferrer"')}>
                            {buttonText}
                        </a>
                    </f:if>
                </f:else>
            </f:if>
        </div>
    </f:if>

    <f:if condition="{heroDecoration}">
        <img src="{neos.media:uri.image(image: heroDecoration)}"
             alt="{alternativeText}"
             class="c-hero__decoration" />
    </f:if>
</div>