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

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

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

<li
    class="tb-event-list-item block mb-2 border border-grey-light"
    itemscope
    itemtype="http://schema.org/Event">

    <events:link.eventDate
        date="{eventDate}"
        currentNode="{targetNode}"
        class="tb-event-list-item__link no-underline text-grey-darker hover:text-grey-darker focus:text-grey-darker block sm:flex p-4 hover:bg-grey-lightest focus:bg-grey-lightest">

        <div class="tb-event-list-item__datetime-wrapper flex-none mr-6">
            <p
                class="tb-event-list-item__date inline sm:block"
                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>
        </div>

        <div class="tb-event-list-item__title-wrapper flex-1">
            <h2 class="tb-event-list-item__title mt-2 sm:mt-0 text-grey-darkest" itemprop="name">
                {eventDate.event.title}
            </h2>

            <f:if condition="{eventDate.event.location}">
                <f:then>
                    <p class="tb-event-list-item__subtitle mt-2">

                        <vh:render partial="EventDates/Time" arguments="{eventDate: eventDate, prefix: '', suffix: '|'}"/>
                        <f:if condition="{eventDate.event.location.name}">
                            <strong itemprop="name">{eventDate.event.location.name}</strong>
                            |
                        </f:if>
                        {eventDate.event.location.city}
                    </p>
                </f:then>
                <f:else>
                    <vh:render partial="EventDates/Time" arguments="{eventDate: eventDate, prefix: '', suffix: ''}"/>
                </f:else>
            </f:if>
        </div>

        <div class="tb-event-list-item__tags flex-none mt-4 sm:mt-0 ml-0 sm:ml-2">
            <f:for each="{eventDate.event.categories}" as="category">
                <span class="tb-badge tb-event-list-item__tag">{category.title}</span>
            </f:for>
        </div>
    </events:link.eventDate>
</li>