{namespace neos=Neos\Neos\ViewHelpers}
{namespace toubiz=Newland\Toubiz\Events\Neos\ViewHelpers}

<neos:link.node node="{targetNode}"
                arguments="{
                    --newland_toubiz_events_neos-full: {
                        '@package': 'newland.toubiz.events.neos',
                        '@controller': 'events',
                        '@action': 'show',
                        event: event
                    }
                }"
                class="tb-card mt-8">

    <f:if condition="{event.media.0.sourceUri}">
        <f:then>
            <img src="{event.media.0.sourceUri}"
                 title="{event.media.0.title}"
                 alt="{event.media.0.title}"
                 class="tb-card__image"
            />

        </f:then>
        <f:else>
            <div class="tb-card__image tb-card__image--fallback">
                <svg class="c-icon">
                    <use xlink:href="#icon-image"></use>
                </svg>
            </div>
        </f:else>
    </f:if>

    <ul class="tb-card__category-list">
        <f:for each="{event.categories}" as="category">
            <li class="tb-card__category-item">
                {category.title}
            </li>
        </f:for>
    </ul>

    <div class="tb-card__body">
        <p class="tb-card__topline">
            <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>
        </p>

        <h3 class="tb-card__title">
            {event.title}
        </h3>

        <div class="tb-card__copy">
            <p>
                <strong>{event.location.name}</strong>
                | {event.location.city}
            </p>
        </div>
    </div>
</neos:link.node>