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

<events:link.event
    event="{eventDate.event}"
    currentNode="{targetNode}"
    class="tb-teaser"
    additionalAttributes="{
        'itemscope': '',
        'itemtype': 'http://schema.org/Event'
    }">

    <common:slot.render slot="aboveTeaser" context="{ event: eventDate.event }" />
    <vh:render section="content" arguments="{_all}" />
    <common:slot.render slot="belowTeaser" context="{ event: eventDate.event }" />
</events:link.event>

<f:section name="content">

    <common:slot.render slot="aboveImage" context="{ event: eventDate.event }" />
    <common:slot.render slot="aboveTeaserImage" context="{ event: eventDate.event }" />
    <f:if condition="{eventDate.event.media.0.uri}">
        <f:then>
            <div class="tb-teaser__image-wrapper">
                <img
                    data-src="{eventDate.event.media.0.uri}"
                    title="{eventDate.event.media.0.title}"
                    alt="{eventDate.event.media.0.title}"
                    class="tb-teaser__image lazyload"
                    itemprop="image" />

                <vh:render section="badge" arguments="{ event: eventDate.event }" />
                <common:slot.render slot="onImage" context="{ event: eventDate.event }" />
                <common:slot.render slot="onTeaserImage" context="{ event: eventDate.event }" />
            </div>
        </f:then>
        <f:else>
            <div class="tb-teaser__image-wrapper">
                <div class="tb-teaser__image-fallback">
                    <svg class="c-icon" viewBox="0 0 512 512">
                        <path fill="currentColor" d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm16 336c0 8.822-7.178 16-16 16H48c-8.822 0-16-7.178-16-16V112c0-8.822 7.178-16 16-16h416c8.822 0 16 7.178 16 16v288zM112 232c30.928 0 56-25.072 56-56s-25.072-56-56-56-56 25.072-56 56 25.072 56 56 56zm0-80c13.234 0 24 10.766 24 24s-10.766 24-24 24-24-10.766-24-24 10.766-24 24-24zm207.029 23.029L224 270.059l-31.029-31.029c-9.373-9.373-24.569-9.373-33.941 0l-88 88A23.998 23.998 0 0 0 64 344v28c0 6.627 5.373 12 12 12h360c6.627 0 12-5.373 12-12v-92c0-6.365-2.529-12.47-7.029-16.971l-88-88c-9.373-9.372-24.569-9.372-33.942 0zM416 352H96v-4.686l80-80 48 48 112-112 80 80V352z"></path>
                    </svg>
                </div>

                <vh:render section="badge" arguments="{ event: eventDate.event }" />

                <common:slot.render slot="onImage" context="{ event: eventDate.event }" />
                <common:slot.render slot="onTeaserImage" context="{ event: eventDate.event }" />            </div>
        </f:else>
    </f:if>
    <common:slot.render slot="belowTeaserImage" context="{ event: eventDate.event }" />
    <common:slot.render slot="belowImage" context="{ event: eventDate.event }" />

    <common:slot.render slot="aboveTitle" context="{ event: eventDate.event }" />
    <common:slot.render slot="aboveTeaserTitle" context="{ event: eventDate.event }" />
    <div class="tb-teaser__text">
        <p
            class="tb-teaser__topline uppercase"
            itemprop="startDate"
            content="{eventDate.event.beginsAt -> f:format.date(format: 'Y-m-d')}"
        >
            {eventDate.event.categories.0.title}
        </p>

        <h3 class="tb-teaser__title" itemprop="name">
            {eventDate.event.title}
        </h3>

        <p
            class="tb-teaser__duration"
            itemprop="startDate"
            content="{eventDate.event.beginsAt -> f:format.date(format: 'Y-m-d')}"
        >
            <events:format.timeRange
                event="{eventDate.event}"
                dateFormat="dd.MM.yyyy"
                timeFormat="HH:mm"
                dateTimeFormat="dd.MM.yyyy, HH:mm"
            />
        </p>

    </div>
    <common:slot.render slot="belowTeaserTitle" context="{ event: eventDate.event }" />
    <common:slot.render slot="belowTitle" context="{ event: eventDate.event }" />
</f:section>

<f:section name="badge">
    <f:if condition="{eventDate.event.isHighlight}">
        <div class="tb-badge">
            <f:translate
                id="views._shared.word.highlight"
                package="Newland.Toubiz.Events.Neos"/>

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