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

<events:link.event
        event="{event}"
        currentNode="{targetNode}"
        class="tb-teaser"
        additionalAttributes="{
        'itemscope': '',
        'itemtype': 'http://schema.org/Event'
    }">
    <vh:render section="content" arguments="{_all}" />

</events:link.event>
<f:section name="content">
    <f:if condition="{event.media.0.sourceUri}">
        <f:then>
            <div class="tb-teaser__image-wrapper">
                <img
                        src="{event.media.0.sourceUri}"
                        title="{event.media.0.title}"
                        alt="{event.media.0.title}"
                        class="tb-teaser__image"
                        itemprop="image" />

                <vh:render section="badge" arguments="{ event: event }" />
            </div>
        </f:then>
        <f:else>
            <div class="tb-teaser__image-wrapper">
                <div class="tb-teaser__image-fallback">
                    <svg class="c-icon">
                        <use xlink:href="#icon-image"></use>
                    </svg>
                </div>

                <vh:render section="badge" arguments="{ event: event }" />
            </div>
        </f:else>
    </f:if>
    <div class="tb-teaser__text">
        <p
                class="tb-teaser__topline"
                itemprop="startDate"
                content="{event.beginsAt -> f:format.date(format: 'Y-m-d')}">

            <f:format.date
                    date="{event.beginsAt}"
                    cldrFormat="E, dd. MMMM yyyy"
                    forceLocale="{targetNode.context.dimensions.language.0}" />

            <f:if condition="{event.endsOnSameDay}">
                <f:else>
                    –
                    <f:format.date
                            date="{event.endsAt}"
                            cldrFormat="E, dd. MMMM yyyy"
                            forceLocale="{targetNode.context.dimensions.language.0}" />

                </f:else>
            </f:if>

            |
            {event.eventDates.0.beginsAt -> f:format.date(format: 'H:i')}
            {f:translate(id: 'views._shared.word.clock', package: 'Newland.Toubiz.Events.Neos')}

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

        </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>

    </div>
</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>