{namespace ep=EP\EpEvents\ViewHelpers}
{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<f:spaceless>
    <f:if condition="{traveltype.imageHeader.uid}">
        <f:then>
            {f:uri.image(image: traveltype.imageHeader, cropVariant: 'default', width: '1440', maxHeight: '700') -> v:variable.set(name: 'headerImage')}
        </f:then>
        <f:else>
            {v:variable.set(name: 'headerImage', value: 'https://placehold.it/1440x700')}
        </f:else>
    </f:if>
</f:spaceless>
<div class="herounit herounit--large {ep:sectionCssClass(sectionValue: traveltype.configuratorType)}">
    <div class="herounit__image" style="background-image: url({headerImage})">
        <svg viewbox="0 0 650 700" preserveAspectRatio="xMinYMid" class="herounit__mask">
            <defs>
                <linearGradient id="gradient" class="section-default">
                    <stop id="gradient__from" offset="0" stop-opacity="0.5" />
                    <stop id="gradient__to" offset="1" stop-opacity="0.5" />
                </linearGradient>
            </defs>
            <polygon id="gradient__polygon" points="0,0 650,0 500,700 0,700" fill="url(#gradient)" />
        </svg>
        <div class="herounit__overlay">
            <div class="herounit__content">
                <img class="herounit__icon" src="{f:uri.resource(path: 'images/{ep:sectionIcon(sectionValue: traveltype.configuratorType)}', extensionName: 'ep_events')}" alt="">
                <h1 class="herounit__title">{traveltype.title -> f:format.nl2br()}<span class="herounit__subtitle">{traveltype.subtitle -> ep:softHyphen()}</span></h1>
                <div class="herounit__text">{traveltype.headertext -> f:format.nl2br()}</div>
            </div>
            <div class="herounit__button {ep:sectionCssClass(sectionValue: traveltype.configuratorType)}">
                <svg class="herounit__button__form" preserveAspectRatio="xMinYMid" viewBox="0 0 12 48">
                    <polygon points="12,0 12,48 0,48" />
                </svg>
                <a class="button button--herounit" href="#configurator"
                   @click.prevent="scrollTo('#configurator')">&raquo; {f:translate(key: 'tx_epevents.label.inquire_now', extensionName: 'ep_events') -> f:format.raw()}</a>
                <svg class="herounit__button__form" preserveAspectRatio="xMinYMid" viewBox="0 0 12 48">
                    <polygon points="0,0 12,0 0,48" />
                </svg>
            </div>
        </div>
    </div>
</div>