{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 tb-teaser--{teaserStyle}"
>
    <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">
                <f:if condition="{eventDate.event.datasource} == 'toubiz_legacy'">
                    <f:then>
                        <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"
                            {f:if(condition: eventDate.event.media.0.focusPoint, then: 'style="object-position:{eventDate.event.media.0.focusPoint}"')}
                        />
                    </f:then>
                    <f:else>
                        <img
                            data-src="{settings.toubizBaseUri}/api/v1/event/{eventDate.event.originalId}/mainImage?format=image/jpeg&width=500"
                            title="{eventDate.event.media.0.title}"
                            alt="{eventDate.event.media.0.title}"
                            class="tb-teaser__image lazyload"
                            itemprop="image"
                            {f:if(condition: eventDate.event.media.0.focusPoint, then: 'style="object-position:{eventDate.event.media.0.focusPoint}"')}
                        />
                    </f:else>
                </f:if>

                <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">
        <f:if condition="{teaserStyle} !== 'poster'">
            <vh:render
                section="dateSection"
                arguments="{ date: eventDate.beginsAt, language: targetNode.context.targetDimensions.language, eventDate: eventDate }"
            />
        </f:if>
        <vh:render partial="EventDates/Teaser/Common/Topline" arguments="{_all}"/>

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

        <f:if condition="{eventDate.cancelled}">
            <p class="tb-teaser__cancelled mb-1">
                {f:translate(id: 'property.canceled', package: 'Newland.Toubiz.Events.Neos', source: 'Models/Event')}
            </p>
        </f:if>

        <f:if condition="{eventDate.event.areaName} || {eventDate.event.location.name}">
            <p class="tb-teaser__location">
                <f:if condition="{eventDate.event.areaName}">
                    <span class="tb-teaser__location">
                        {eventDate.event.areaName}
                    </span>
                </f:if>
                <f:if condition="{eventDate.event.location.name}">
                    <f:if condition="{eventDate.event.areaName}">
                        <span>&bull;</span>
                    </f:if>
                    <span class="tb-teaser__location">
                        {eventDate.event.location.name}
                    </span>
                </f:if>
            </p>
        </f:if>

        <div class="mt-2 {f:if(condition: eventDate.cancelled, then: 'line-through', else: '')}">
            <vh:render partial="EventDates/Time" arguments="{eventDate: eventDate, prefix: '', suffix: ''}" />
        </div>

        <f:if condition="{eventDate.event.marketingPrice.value}">
            <p class="tb-teaser__marketing-price">
                <f:if condition="{eventDate.event.marketingPrice.prefix}">
                    <span class="tb-teaser__marketing-price__prefix">
                        {eventDate.event.marketingPrice.prefix}
                    </span>
                </f:if>
                <span class="tb-teaser__marketing-price__value">
                    {events:format.priceFormat(price: eventDate.event.marketingPrice.value)}
                    <f:if condition="{eventDate.event.marketingPrice.currency} == 'chf'">
                        <f:then>
                            CHF
                        </f:then>
                        <f:else>
                            €
                        </f:else>
                    </f:if>
                </span>
                <f:if condition="{eventDate.event.marketingPrice.comment}">
                    / {eventDate.event.marketingPrice.comment}
                </f:if>
            </p>
        </f:if>

    </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="{event.isHighlight}">
        <div class="tb-badge">
            <f:translate
                id="views._shared.word.highlight"
                package="Newland.Toubiz.Events.Neos"/>

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

<f:section name="dateSection">
    <f:if condition="{date}">
        <div class="tb-teaser-date">
            <span class="text-sm uppercase block">
                <f:format.date
                    date="{date}"
                    cldrFormat="EEEE"
                    forceLocale="{language}" />
            </span>
            <span class="tb-teaser-date__month {f:if(condition: eventDate.cancelled, then: 'line-through', else: '')}">
                <f:format.date
                    date="{date}"
                    cldrFormat="dd.MM."
                    forceLocale="{language}"
                /></span>
            <span class="tb-teaser-date__year">
                <f:format.date
                    date="{date}"
                    cldrFormat="yyyy"
                    forceLocale="{language}" />
            </span>
        </div>
    </f:if>
</f:section>