{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<div class="herounit herounit--event">
    <div id="ep-main-carousel" class="navbar-carousel carousel slide">
        <div class="item{f:if(condition: iteration.isFirst, then: ' active')}">
            <div class="container stoerer">
                <div class="row">
	                <div class="col-xs-12 col-md-3 col-lg-2 col-lg-offset-2">
		                <div>{settings.eventDateDayFrom -> f:format.raw()}<br>-<br>{settings.eventDateDayTo -> f:format.raw()}</div>
		                <div>{settings.eventDateMonth -> f:format.raw()}</div>
	                </div>
	                <div class="col-xs-6 col-md-4 col-lg-3">{settings.eventHeroClaim -> f:format.raw()}</div>
	                <div class="col-xs-6 col-md-3 col-lg-2">{settings.eventHeroDescription -> f:format.raw()}</div>
                </div>
            </div>
	        {slides -> v:iterator.first() -> v:variable.set(name: 'slide')}
            <f:if condition="{slide.image.0}">
                <f:then>
                    <img src="{f:uri.image(image: slide.image.0, width: '1370')}"
                         alt="{slide.image.0.alternative}" title="{slide.image.0.title}">
                </f:then>
                <f:else>
                    <img src="https://placehold.it/1370x700" alt="">
                </f:else>
            </f:if>
        </div>
    </div>
    <f:if condition="{badge}">
        <f:alias map="{badgeData: badge.0.data}">
            <f:link.typolink parameter="{badgeData.link}">
                <div class="herounit__badge herounit__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="{settings.eventAddon}">
        <f:link.typolink parameter="{settings.eventAddon.link}" class="{settings.eventAddon.class}"
                         title="{settings.eventAddon.title}">
            <img src="{f:uri.image(src: settings.eventAddon.file)}"
                 alt="{settings.eventAddon.title}" title="{settings.eventAddon.title}">
        </f:link.typolink>
    </f:if>
</div>