{namespace neos=Neos\Neos\ViewHelpers}

<neos:contentElement.wrap node="{node}">
    <div class="c-hero">
        <f:if condition="{heroVideo}">
            <f:then>
                <f:render section="heroVideo"></f:render>
            </f:then>
            <f:else>
                <f:render section="heroImage"></f:render>
            </f:else>
        </f:if>
        <f:if condition="{neos:rendering.inBackend()} || {heroTitle}">
            <div class="c-hero__text">
                {neos:contentElement.editable(property: 'heroTitle', tag: 'h2', class: 'c-hero__title')}
                <f:if condition="{neos:rendering.inBackend()} || {heroSubtitle}">
                    {neos:contentElement.editable(property: 'heroSubtitle', tag: 'p', class: 'c-hero__subtitle')}
                </f:if>
            </div>
        </f:if>

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

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

<f:section name="heroVideo">
    <video class="c-hero__video" sizes="(max-width: 1920px) 100vw, 1920px" autoplay loop muted preload="auto"
    poster="{neos.media:uri.image(image: heroImage, maximumWidth: 1600)}">
        <source src="{f:uri.resource(resource: heroVideo.resource)}" type="video/mp4">
    </video>
</f:section>