{namespace vh=Newland\NeosViewHelpers\ViewHelpers}
{namespace common=Newland\Toubiz\Common\Neos\ViewHelpers}

<common:slot.render slot="aboveImage" context="{ eventDate: eventDate }" />
<common:slot.render slot="aboveTeaserImage" context="{ eventDate: eventDate }" />
<div class="tb-teaser__image-wrapper">
    <img
        data-src="{eventDate.event.mainMedium.sourceUri}?w=500"
        alt="{eventDate.event.mainMedium.altText}"
        class="tb-teaser__image lazyload"
        itemprop="image url"
        {f:if(condition: eventDate.event.mainMedium.focusPoint, then: 'style="object-position: {eventDate.event.mainMedium.focusPoint}"')}
    />

    <vh:render section="badge" arguments="{ eventDate: eventDate }" />
    <vh:render section="label-box" arguments="{ eventDate: eventDate, targetNode: targetNode }" />
    <common:slot.render slot="onImage" context="{ eventDate: eventDate }" />
    <common:slot.render slot="onTeaserImage" context="{ eventDate: eventDate }" />
</div>

<common:slot.render slot="belowImage" context="{ eventDate: eventDate }" />
<common:slot.render slot="belowTeaserImage" context="{ eventDate: eventDate }" />

<f:section name="badge">
    <f:if condition="{eventDate.event.isHighlight}">
        <span>
            <div class="tb-badge" itemprop="value">
                <vh:translate
                    id="property.attribute.labels.tip"
                    package="Newland.Toubiz.Events.Neos"
                    source="Views/Teaser" />

            </div>
        </span>
    </f:if>
</f:section>

<f:section name="label-box">
    <div class="tb-teaser__label-box">
        <div
            class="tb-teaser__date inline sm:block"
            itemprop="startDate"
            content="{eventDate.beginsAt -> f:format.date(format: 'Y-m-d')}">

            <span class="text-xs">
                <f:format.date
                    date="{eventDate.beginsAt}"
                    cldrFormat="EEEE"
                    forceLocale="{targetNode.context.dimensions.language.0}" />
            </span>

            <br>

            <strong>
                <f:format.date
                    date="{eventDate.beginsAt}"
                    format="d" />
            </strong>

            <f:format.date
                date="{eventDate.beginsAt}"
                cldrFormat="MMM"
                forceLocale="{targetNode.context.dimensions.language.0}" />

        </div>
    </div>
</f:section>