{namespace v=FluidTYPO3\Vhs\ViewHelpers}
{images -> v:iterator.first() -> v:variable.set(name: 'headerImage')}
<div class="pagehead">
    <f:if condition="{headerImage.uid}">
        <div class="pagehead__image responsive-bg"
             style="background-image: url({f:uri.image(src: headerImage.uid, treatIdAsReference: 1, crop: headerImage.crop, height: '240')})"
             data-mobile="{f:uri.image(src: headerImage.uid, treatIdAsReference: 1, crop: headerImage.crop, height: '240')}"
             data-desktop="{f:uri.image(src: headerImage.uid, treatIdAsReference: 1, crop: headerImage.crop, width: '1370')}"></div>
    </f:if>
    <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>{topline}</span><br>{headline}</div>
                </div>
            </div>
        </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="{headerImage.originaldescription}">
        <div class="pagehead__picturecredit">{headerImage.description -> f:format.htmlspecialchars()}</div>
    </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>
</div>