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

<li class="tb-event-list-item">
    <header class="tb-event-list-item__header"
            aria-haspopup="true"
            aria-expanded="false"
            data-target-enhancement
            data-target-enhancement-target="#tb-event-list-item-{event.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">
                <f:format.date date="{toubiz:context.eventDate(event: event, currentDate: currentDate)}"
                                cldrFormat="E"
                                forceLocale="{targetNode.context.dimensions.language.0}"
                />

                <strong>
                    <f:format.date date="{toubiz:context.eventDate(event: event, currentDate: currentDate)}"
                                   format="d.m."
                    />

                </strong>
            </p>
            <f:if condition="{event.beginsAtSpecificTime}">
                <span class="tb-event-list-item__time">
                    {event.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">
                {event.title}
            </h2>
            <p class="tb-event-list-item__subtitle">
                <strong>{event.location.name}</strong> | {event.location.city}
            </p>
        </div>

        <div class="tb-event-list-item__tags">
            <f:for each="{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-{event.originalId}">
        <div class="tb-event-list-item__text">
            <div class="tb-event-list-item__description">
                <p>
                    {event.description -> toubiz:format.crop()}
                </p>
                <p>
                    <f:render partial="Events/Address.html" arguments="{address: event.location}" />
                </p>
                <p>
                    <f:render partial="Events/UpcomingEventDates.html" arguments="{event: 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: event
                                    }
                                }"
                                class="c-button">

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

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