{namespace v=FluidTYPO3\Vhs\ViewHelpers}
{slides -> v:iterator.first() -> v:variable.set(name: 'slide')}
<div class="pagehead">
    <div class="pagehead__image responsive-bg"
         style="background-image: url({f:uri.image(src: slide.image.0.uid, treatIdAsReference: 1, crop: slide.image.0.crop, height: '240')})"
         data-mobile="{f:uri.image(src: slide.image.0.uid, treatIdAsReference: 1, crop: slide.image.0.crop, height: '240')}"
         data-desktop="{f:uri.image(src: slide.image.0.uid, treatIdAsReference: 1, crop: slide.image.0.crop, width: '1370')}"></div>
    <div class="pagehead__main">
        <div class="pagehead__inner">
            <div class="header-caption">
                <div class="header-caption__inner header-caption__inner--small">
                    <div class="header-caption__text">
                        <span>{slide.headline}</span><br>{slide.subline}
                    </div>
                    <f:if condition="{slide.button}">
                        <f:link.page pageUid="{slide.page_uid}" class="button header-caption__button">{slide.button}</f:link.page>
                    </f:if>
                </div>
            </div>
            <f:if condition="{slide.button}">
                <f:link.page pageUid="{slide.page_uid}" class="button header__button">{slide.button}</f:link.page>
            </f:if>
        </div>
    </div>
    <f:if condition="{settings.showSkipassBadge}">
        <f:image src="EXT:ep_theme/Resources/Public/images/badge_skipass.png" alt="Skipass inklusive" class="pagehead__badge pagehead__badge--skipass" />
    </f:if>
    <f:if condition="{badge}">
        <f:alias map="{badgeData: badge.0.data}">
            <f:link.typolink parameter="{badgeData.link}" title="{badgeData.title}">
                <div class="pagehead__badge pagehead__badge--custom custom-badge">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                         preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 200" class="custom-badge__background">
                        <g>
                            <circle id="bgouter" cx="100" cy="100" r="100"/>
                            <circle id="bginner" cx="100" cy="100" r="70"/>
                        </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>
    <f:if condition="{slide.image.0.description}">
        <div class="pagehead__picturecredit">{slide.image.0.description -> f:format.htmlspecialchars()}</div>
    </f:if>
</div>