{namespace neos=Neos\Neos\ViewHelpers}

<neos:link.node node="{targetNode}"
                arguments="{
                    --newland_toubiz_events_neos-full: {
                        '@package': 'newland.toubiz.events.neos',
                        '@controller': 'events',
                        '@action': 'show',
                        event: eventDate.event
                    }
                }"
                class="tb-card"
                additionalAttributes="{
                    'itemscope': '',
                    'itemtype': 'http://schema.org/Event'
                }">

    <f:if condition="{eventDate.event.media.0.sourceUri}">
        <f:then>
            <img src="{eventDate.event.media.0.sourceUri}"
                 title="{eventDate.event.media.0.title}"
                 alt="{eventDate.event.media.0.title}"
                 class="tb-card__image"
                 itemprop="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="{eventDate.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"
           itemprop="startDate"
           content="{eventDate.event.beginsAt -> f:format.date(format: 'Y-m-d')}">

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

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

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

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

        <div class="tb-card__copy"
             itemprop="location"
             itemscope
             itemtype="http://schema.org/Place">

            <p>
                <strong itemprop="name">
                    {eventDate.event.location.name}
                </strong>

                <f:if condition="{eventDate.event.location}">
                    |
                    <span itemprop="address" content="{eventDate.event.location.fullAddress}">
                        {eventDate.event.location.city}
                    </span>
                </f:if>
            </p>
        </div>
    </div>
</neos:link.node>