{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">
                <f:if condition="{heroIcon}">
                    <img
                        class="c-hero__icon mb-4"
                        src="{neos.media:uri.image(image: heroIcon, maximumWidth: 100)}"
                        alt="{f:if(condition: '{heroIcon.caption}', then: heroIcon.caption, else: heroIcon.title)}"
                    />
                </f:if>
                {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}">
            <f:if condition="{heroDecorationAlignment} == 'stretched'">
                <f:then>
                    <img class="c-hero__decoration" src="{neos.media:uri.image(image: heroDecoration)}" style="width: 100%;"/>
                </f:then>
                <f:else>
                    <f:if condition="{heroDecorationAlignment} == 'pattern'">
                        <f:then>
                            <div class="c-hero__decoration" style="background-image: url('{neos.media:uri.image(image: heroDecoration)}');">
                                <img src="{neos.media:uri.image(image: heroDecoration)}" style="visibility: hidden;"/>
                            </div>
                        </f:then>
                        <f:else>
                            <img src="{neos.media:uri.image(image: heroDecoration)}" class="c-hero__decoration"/>
                        </f:else>
                    </f:if>
                </f:else>
            </f:if>
        </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 playsinline 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>