<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      data-namespace-typo3-fluid="true">
<f:variable name="speed" value="{data.hero_speed -> f:format.trim()}" />
<f:variable name="speed"><f:if condition="{speed}"><f:then>{speed}</f:then><f:else>.5</f:else></f:if></f:variable>
<f:variable name="defaultBg">https://manufactura.bold-themes.com/main-demo/wp-content/uploads/sites/2/2017/05/hero_home_01.jpg</f:variable>
<f:variable name="variant" value="{data.hero_variant -> f:format.trim()}" />

<f:switch expression="{variant}">
    <f:case value="parallax">
        <f:variable name="bgUrl"><f:if condition="{data.hero_image.0}"><f:then>{f:uri.image(image: data.hero_image.0)}</f:then><f:else>{defaultBg}</f:else></f:if></f:variable>
        <div class="bg-color-brown parallax-img min-h-[900px]" data-speed="{speed}" style="background-image: url('{bgUrl}'); background-size: cover; background-position: center;"></div>
    </f:case>
    <f:case value="parallax_content">
        <f:variable name="bgUrl"><f:if condition="{data.hero_image.0}"><f:then>{f:uri.image(image: data.hero_image.0)}</f:then><f:else>https://manufactura.bold-themes.com/main-demo/wp-content/uploads/sites/2/2017/05/hero_home_02.jpg</f:else></f:if></f:variable>
        <div class="bg-color-brown parallax-img pt-60 pb-48 px-5" data-speed="{speed}" style="background-image: url('{bgUrl}'); background-size: cover; background-position: center;">
            <div class="flex flex-col items-center justify-center pt-15 pb-24 max-w-[940px] mx-auto">
                <f:if condition="{data.hero_subheadline}">
                    <small class="sub-headline-3 text-center text-color-white pb-6">{data.hero_subheadline}</small>
                </f:if>
                <f:if condition="{data.hero_headline}">
                    <h1 class="headline-center text-color-white">{data.hero_headline}</h1>
                </f:if>
                <f:if condition="{data.hero_link}">
                    <f:link.typolink parameter="{data.hero_link}" class="btn-white mt-10">VIEW MORE</f:link.typolink>
                </f:if>
            </div>
        </div>
    </f:case>
    <f:case value="swiper_simple">
        <div class="main-slider-1 swiper-slider white inset_2 h-[100vh]">
            <div class="swiper h-full">
                <div class="swiper-wrapper">
                    <f:for each="{data.hero_slides}" as="slide">
                        <f:if condition="{slide.slide_image.0}">
                            <div class="swiper-slide">
                                <div class="h-full w-full px-5" style="background-image: url('{f:uri.image(image: slide.slide_image.0)}'); background-position: center; background-size: cover;">
                                    <f:if condition="{slide.slide_overlay_image.0}">
                                        <img class="absolute left-2/4 top-2/4 -translate-y-2/4 -translate-x-2/4" src="{f:uri.image(image: slide.slide_overlay_image.0)}" alt="" />
                                    </f:if>
                                </div>
                            </div>
                        </f:if>
                    </f:for>
                </div>
            </div>
            <div class="pagination-area">
                <div class="swiper-pagination" id="swiper-pagination"></div>
            </div>
            <div class="slider-prev slider-arr show-lg"></div>
            <div class="slider-next slider-arr show-lg"></div>
        </div>
    </f:case>
    <f:case value="swiper_text">
        <div class="main-slider-1 swiper-slider inset_2 h-[100vh]">
            <div class="swiper h-full">
                <div class="swiper-wrapper">
                    <f:for each="{data.hero_slides}" as="slide">
                        <f:if condition="{slide.slide_image.0}">
                            <div class="swiper-slide">
                                <div class="h-full w-full px-5" style="background-image: url('{f:uri.image(image: slide.slide_image.0)}'); background-position: center; background-size: cover;">
                                    <f:if condition="{slide.slide_subtitle} || {slide.slide_title}">
                                        <div class="text-template-11">
                                            <f:if condition="{slide.slide_subtitle}"><span class="mb-5">{slide.slide_subtitle}</span></f:if>
                                            <f:if condition="{slide.slide_title}"><strong class="mb-14">{slide.slide_title}</strong></f:if>
                                            <f:if condition="{slide.slide_link}"><a href="#">VIEW MORE</a></f:if>
                                        </div>
                                    </f:if>
                                </div>
                            </div>
                        </f:if>
                    </f:for>
                </div>
            </div>
            <div class="pagination-area">
                <div class="swiper-pagination" id="swiper-pagination"></div>
            </div>
            <div class="slider-prev slider-arr show-lg"></div>
            <div class="slider-next slider-arr show-lg"></div>
        </div>
    </f:case>
    <f:case value="swiper_mixed">
        <div class="main-slider-1 swiper-slider inset_2 md:h-[720px] h-96 diff">
            <div class="swiper h-full">
                <div class="swiper-wrapper">
                    <f:for each="{data.hero_slides}" as="slide">
                        <f:if condition="{slide.slide_image.0}">
                            <div class="swiper-slide">
                                <div class="h-full w-full px-5 relative" style="background-image: url('{f:uri.image(image: slide.slide_image.0)}'); background-position: center; background-size: cover;">
                                    <f:if condition="{slide.slide_headline} || {slide.slide_subheadline}">
                                        <div class="absolute top-2/4 -translate-y-2/4 sm:left-32 left-0 sm:px-0 px-10 max-w-[500px] w-full">
                                            <f:if condition="{slide.slide_headline}"><h2 class="headline mb-5">{slide.slide_headline}</h2></f:if>
                                            <f:if condition="{slide.slide_subheadline}"><p class="sub-headline">{slide.slide_subheadline}</p></f:if>
                                        </div>
                                    </f:if>
                                </div>
                            </div>
                        </f:if>
                    </f:for>
                </div>
            </div>
            <div class="pagination-area">
                <div class="swiper-pagination" id="swiper-pagination"></div>
            </div>
            <div class="slider-prev slider-arr show-lg near"></div>
            <div class="slider-next slider-arr show-lg near"></div>
        </div>
    </f:case>

    <f:defaultCase>
        <f:if condition="{data.hero_slides}">
            <f:then>
                <div class="main-slider-1 swiper-slider inset_2 h-[100vh]">
                    <div class="swiper h-full">
                        <div class="swiper-wrapper">
                            <f:for each="{data.hero_slides}" as="slide">
                                <f:if condition="{slide.slide_image.0}">
                                    <div class="swiper-slide">
                                        <div class="h-full w-full px-5" style="background-image: url('{f:uri.image(image: slide.slide_image.0)}'); background-position: center; background-size: cover;">
                                            <f:if condition="{slide.slide_subtitle} || {slide.slide_title}">
                                                <div class="text-template-11">
                                                    <f:if condition="{slide.slide_subtitle}"><span class="mb-5">{slide.slide_subtitle}</span></f:if>
                                                    <f:if condition="{slide.slide_title}"><strong class="mb-14">{slide.slide_title}</strong></f:if>
                                                    <f:if condition="{slide.slide_link}"><a href="#">VIEW MORE</a></f:if>
                                                </div>
                                            </f:if>
                                        </div>
                                    </div>
                                </f:if>
                            </f:for>
                        </div>
                    </div>
                    <div class="pagination-area">
                        <div class="swiper-pagination" id="swiper-pagination"></div>
                    </div>
                    <div class="slider-prev slider-arr show-lg"></div>
                    <div class="slider-next slider-arr show-lg"></div>
                </div>
            </f:then>
            <f:else>
                <f:variable name="bgUrl"><f:if condition="{data.hero_image.0}"><f:then>{f:uri.image(image: data.hero_image.0)}</f:then><f:else>{defaultBg}</f:else></f:if></f:variable>
                <div class="bg-color-brown parallax-img min-h-[900px]" data-speed="{speed}" style="background-image: url('{bgUrl}'); background-size: cover; background-position: center;"></div>
            </f:else>
        </f:if>
    </f:defaultCase>
</f:switch>
</html>
