{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="{event}"
    currentNode="{targetNode}"
    class="tb-teaser"
    additionalAttributes="{
        'itemscope': '',
        'itemtype': 'http://schema.org/Event'
    }">

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

<f:section name="content">

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

                <vh:render section="badge" arguments="{ event: event }" />
                <common:slot.render slot="onImage" context="{ event: event }" />
                <common:slot.render slot="onTeaserImage" context="{ event: 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: event }" />

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

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

            <events:format.timeRange
                event="{event}"
                dateFormat="E, dd. MMMM yyyy"
                timeFormat="HH:mm"
                dateTimeFormat="E, dd. MMMM yyyy, HH:mm"
            />
        </p>

        <h3 class="tb-teaser__title" itemprop="name">
            {event.title}
        </h3>
        <ul class="tb-teaser__facets">
            <f:if condition="{event.location.name}">
                <li class="tb-teaser-facet">
                    <span class="tb-teaser-facet__label" itemprop="location">
                        <strong>{event.location.name}</strong>
                    </span>
                </li>
            </f:if>

            <f:if condition="{event.location}">
                <li class="tb-teaser-facet">
                    <span class="tb-teaser-facet__label" itemprop="address">
                        {event.location.city}
                    </span>
                </li>
            </f:if>
        </ul>

        <f:if condition="{event.beginsAt}">
            <div class="mt-2 {f:if(condition: event.cancelled, then: 'line-through', else: '')}">
                {event.beginsAt -> f:format.date(format: 'H:i')}
                {f:translate(id: 'views._shared.word.clock', package: 'Newland.Toubiz.Events.Neos')}

                <f:if condition="{event.endsAt}">
                    -
                    {event.endsAt -> f:format.date(format: 'H:i')}
                    {f:translate(id: 'views._shared.word.clock', package: 'Newland.Toubiz.Events.Neos')}
                </f:if>
            </div>
        </f:if>
    </div>

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

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

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