{namespace ep=EP\EpEvents\ViewHelpers}
{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<div class="herounit herounit--indent {ep:sectionCssClass(sectionValue: activity.configuratorType)}">
    <f:spaceless>
        <f:if condition="{activity.imageHeader.uid}">
            <f:then>
                {f:uri.image(image: activity.imageHeader, cropVariant: 'default', width: '1440', maxHeight: '700') -> v:variable.set(name: 'headerImage')}
            </f:then>
            <f:else>
                {f:uri.image(src: settings.activityDefaultHeaderImage, width: '1440') -> v:variable.set(name: 'headerImage')}
            </f:else>
        </f:if>
    </f:spaceless>
    <div class="herounit__image" style="background-image: url({headerImage})">
        <svg viewbox="0 0 900 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 900,0 750,700 0,700" fill="url(#gradient)" />
        </svg>
        <div class="herounit__overlay">
            <div class="herounit__content">
                <h1 class="herounit__title">
                    <span class="herounit__topline">{f:translate(key: 'tx_epevents.label.programme_suggestion', extensionName: 'EpEvents') -> f:format.raw()}</span>{activity.name -> ep:softHyphen()}
                    <br>
                    <span class="herounit__subtitle">{f:translate(key: 'tx_epevents.label.category', extensionName: 'EpEvents') -> f:format.raw()} {activity.configuratorTypeLabel}</span>
                </h1>
                <f:if condition="{activity.keywords}">
                    <div class="herounit__text">
                        <ul>
                            <f:for each="{activity.keywords -> v:iterator.explode(glue: 'constant:LF')}" as="keyword">
                                <li>{keyword}</li>
                            </f:for>
                        </ul>
                    </div>
                </f:if>
            </div>
        </div>
    </div>
</div>