{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-targets.0="#tb-event-list-item-{eventDate.originalId}"
            data-target-enhancement-exclusive-group="event-list-group"
            data-target-enhancement-plugins.0.name="toggle-aria-expanded">

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

                <events:link.event event="{eventDate.event}"
                                   currentNode="{node}"
                                   class="c-button"
                                   additionalAttributes="{'itemprop': 'url'}">

                    {f:translate(id: 'views.events._listItem.detailLinkLabel', package: 'Newland.Toubiz.Events.Neos')}
                </events:link.event>
            </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>