{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"
>
    <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">
                <f:if condition="{event.datasource} == 'toubiz_legacy'">
                    <f:then>
                        <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}"')}
                        />
                    </f:then>
                    <f:else>
                        <img
                            data-src="{settings.toubizBaseUri}/api/v1/event/{event.originalId}/mainImage?format=image/jpeg&width=500"
                            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}"')}
                        />
                    </f:else>
                </f:if>

                <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">
        <vh:render partial="Events/Teaser/Common/Topline" arguments="{_all}" />

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

        <f:if condition="{event.location}">
            <p class="tb-teaser__location">
                {event.location.name}
            </p>
        </f:if>

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

        <div class="mt-2">
            <p
                class="tb-teaser__dates"
                itemprop="startDate"
                content="{event.beginsAt -> f:format.date(format: 'Y-m-d')}">

                <events:format.timeRange
                    event="{event}"
                    dateFormat="{f:if(
                        condition: '{event.language} === \'de\'',
                        then: 'E, dd. MMMM yyyy',
                        else: 'E, dd MMMM yyyy'
                    )}"
                    timeFormat="HH:mm"
                    dateTimeFormat="{f:if(
                        condition: '{event.language} === \'de\'',
                        then: 'E, dd. MMMM yyyy, HH:mm',
                        else: 'E, dd MMMM yyyy, HH:mm'
                    )}"
                />

                <f:if condition="{event.eventDates -> f:count()} == 1 && {event.beginsAt}">
                    {f:translate(id: 'views._shared.word.clock', package: 'Newland.Toubiz.Events.Neos')}
                </f:if>
            </p>

            <f:if condition="{event.beginsAt}
                && ({event.eventDates -> f:count()} > 1)
                && {event.beginsAtSpecificTime}"
            >
                <p class="tb-teaser__time {f:if(condition: event.canceled, 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.endsAtSpecificTime}">
                        -
                        {event.endsAt -> f:format.date(format: 'H:i')}
                        {f:translate(id: 'views._shared.word.clock', package: 'Newland.Toubiz.Events.Neos')}
                    </f:if>
                </p>
                <f:if condition="{event.canceled}">
                    <p class="text-negative-500 font-bold">
                        {f:translate(id: 'property.canceled', package: 'Newland.Toubiz.Events.Neos', source: 'Models/Event')}
                    </p>
                </f:if>
            </f:if>
        </div>
    </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>