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

<f:comment>
    <!--
        Event dates list item partial.

        This renders an event date.
    -->
</f:comment>

<li class="tb-event-list-item" itemscope itemtype="http://schema.org/Event">
    <header class="tb-event-list-item__header"
            aria-haspopup="true"
            aria-expanded="false"
            data-target-enhancement
            data-target-enhancement-target="#tb-event-list-item-{eventDate.originalId}"
            data-target-enhancement-exclusive-group="event-list-group"
            data-aria-target-enhancement>

        <div class="tb-event-list-item__datetime-wrapper">
            <p class="tb-event-list-item__date"
               itemprop="startDate"
               content="{eventDate.beginsAt -> f:format.date(format: 'Y-m-d')}">

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

                <strong>
                    <f:format.date date="{eventDate.beginsAt}"
                                   format="d.m." />

                </strong>
            </p>
            <f:if condition="{eventDate.beginsAtSpecificTime}">
                <span class="tb-event-list-item__time">
                    {eventDate.beginsAt -> f:format.date(format: 'H:i')}
                    {f:translate(id: 'views._shared.word.clock', package: 'Newland.Toubiz.Events.Neos')}
                </span>
            </f:if>
        </div>

        <div class="tb-event-list-item__title-wrapper">
            <h2 class="tb-event-list-item__title" itemprop="name">
                {eventDate.event.title}
            </h2>

            <f:if condition="{eventDate.event.location}">
                <p class="tb-event-list-item__subtitle">
                    <strong itemprop="name">{eventDate.event.location.name}</strong>
                    |
                    {eventDate.event.location.city}
                </p>
            </f:if>
        </div>

        <div class="tb-event-list-item__tags">
            <f:for each="{eventDate.event.categories}" as="category">
                <span class="tb-badge tb-event-list-item__tag">{category.title}</span>
            </f:for>
        </div>
    </header>

    <div class="tb-event-list-item__body" id="tb-event-list-item-{eventDate.originalId}">
        <div class="tb-event-list-item__text">
            <div class="tb-event-list-item__description">
                <p itemprop="description">
                    {eventDate.event.description -> events:format.crop()}
                </p>

                <p itemprop="location" itemscope itemtype="http://schema.org/Place">
                    <f:render partial="Events/Address.html" arguments="{address: eventDate.event.location}" />
                </p>

                <p>
                    <f:render partial="Events/UpcomingEventDates.html" arguments="{event: eventDate.event, node: targetNode}" />
                </p>
            </div>
            <div class="tb-event-list-item__actions">
                <neos:link.node node="{targetNode}"
                                arguments="{
                                    --newland_toubiz_events_neos-full: {
                                        '@package': 'newland.toubiz.events.neos',
                                        '@controller': 'events',
                                        '@action': 'show',
                                        event: eventDate.event
                                    }
                                }"
                                format="html"
                                class="c-button"
                                additionalAttributes="{'itemprop': 'url'}">

                    {f:translate(id: 'views.events._listItem.detailLinkLabel', package: 'Newland.Toubiz.Events.Neos')}
                </neos:link.node>
            </div>
        </div>
        <f:if condition="{eventDate.event.media.0.sourceUri}">
            <figure class="tb-event-list-item__image">
                <img src="{eventDate.event.media.0.sourceUri}"
                     title="{eventDate.event.media.0.title}"
                     alt="{eventDate.event.media.0.title}"
                     itemprop="image" />

            </figure>
        </f:if>
    </div>
</li>