{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<div class="pagehead">
    <div class="slider slider--header{f:if(condition: '{slides -> f:count()} == 1', then: ' slider--disabled')}">
        <f:for each="{slides}" as="slide" iteration="iteration">
            <div class="slider__item">
                <div class="herounit">
                    <f:alias map="{image: slide.image.0}">
                        <f:if condition="{image}">
                            <div class="herounit__image responsive-bg" style="background-image: url({f:uri.image(image: image, height: '240')})"
                                 data-mobile="{f:uri.image(image: image, height: '240')}"
                                 data-desktop="{f:uri.image(image: image, width: '1370')}"></div>
                        </f:if>
                    </f:alias>
                    <div class="herounit__main">
                        <div class="herounit__inner">
                            <div class="header-caption">
                                <span class="header-caption__headline">{slide.headline}</span>
                                <span class="header-caption__subline">{slide.subline}</span>
                                <f:if condition="{slide.button}">
                                    <f:link.typolink parameter="{slide.page_uid}" class="button header-caption__button">{slide.button}</f:link.typolink>
                                </f:if>
                            </div>
                            <f:if condition="{slide.button}">
                                <f:link.typolink parameter="{slide.page_uid}" class="button header__button">{slide.button}</f:link.typolink>
                            </f:if>
                        </div>
                    </div>
                    <f:if condition="{settings.showSkipassBadge}">
                        <f:link.typolink parameter="{settings.skipassPageUid}" title="Skipass inklusive">
                            <f:image src="EXT:ep_theme/Resources/Public/images/badge_skipass.png"
                                     alt="Skipass inklusive" class="herounit__badge herounit__badge--skipass" />
                        </f:link.typolink>
                    </f:if>
                    <f:if condition="{badge}">
                        <f:alias map="{badgeData: badge.0.data}">
                            <f:link.typolink parameter="{badgeData.link}" title="{badgeData.title}">
                                <div class="herounit__badge herounit__badge--custom custom-badge">
                                    <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"
                                         viewBox="0 0 200 200" class="custom-badge__background">
                                        <g>
                                            <circle id="bgouter" cx="100" cy="100" r="100"></circle>
                                            <circle id="bginner" cx="100" cy="100" r="70"></circle>
                                        </g>
                                    </svg>
                                    <div class="custom-badge__content">
                                        <span class="custom-badge__title">{badgeData.title -> f:format.raw()}</span>
                                        <span class="custom-badge__subtitle">{badgeData.subtitle -> f:format.raw()}</span>
                                    </div>
                                </div>
                            </f:link.typolink>
                        </f:alias>
                    </f:if>
                </div>
            </div>
        </f:for>
    </div>
</div>