<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      xmlns:sms="http://typo3.org/ns/SMS/SmsResponsiveImages/ViewHelpers"
      xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers" data-namespace-typo3-fluid="true">


<f:if condition="{files} == false">
    <v:variable.set name="files" value="{v:page.resources.fal( slideCollect: 99, slideCollectReverse: 0)}"/>
</f:if>

<v:variable.set name="files" value="{v:iterator.first(haystack: files)}"/>


<f:if condition="{files}">
    <f:switch expression="{files.type}">
        <f:case value="4">
            <f:render section="video" arguments="{file:files, settings:settings}"/>

        </f:case>
        <f:defaultCase>
            <f:render section="image" arguments="{file:files,  settings:settings}"/>
        </f:defaultCase>
    </f:switch>
</f:if>


<f:section name="image">
    <div class="hero-bg hero-bg--image">
        <sms:image
                width="1920"
                src="{file.uid}"
                alt="{file.alternative}"
                title="{file.title}"
                treatIdAsReference="true"
                breakpoints="{
                  0: {'cropVariant': 'desktop', 'media': '(min-width: 1024px) and (orientation:landscape)', 'srcset': '1024,1280,1440,1920,2048,2560,3840,5120', 'sizes': '100vw'},
                  1: {'cropVariant': 'mobile', 'media': '(orientation:portrait)','srcset': '375,750,1125', 'sizes': '100vw'}
                }"
        />

    </div>
</f:section>

<f:section name="video">
    <div class="hero-bg hero-bg--video">
        <f:media class="hero-video" file="{file}" width="{dimensions.width}" height="{dimensions.height}" alt="{file.alternative}" title="{file.title}" additionalConfig="{loop: '1', autoplay: '1', muted:'muted'}"/>
    </div>
</f:section>
