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

<div class="mb-10">
    <div class="tb-event-list is-loaded">

        <h2 class="tb-event-list__title text-center mb-4">
            <f:format.raw>
                <f:translate
                    id="eventsToday.title"
                    package="Newland.Toubiz.Events.Neos"
                    source="Views/Events/Index" />
            </f:format.raw>
        </h2>

        <f:if condition="{eventDates -> f:count()} > 0">
            <f:then>
                <f:if condition="{displayAsTeaserList}">
                    <f:then>
                        <div class="tb-event-list__body relative">
                            <ul data-toubiz-events-list-items
                                class="tb-teaser-list o-grid o-grid--fourths">
                                <f:for each="{eventDates}" as="eventDate">
                                    <li class="o-grid__item">
                                        <vh:render
                                            partial="EventDates/Teaser/Event"
                                            arguments="{
                                                eventDate: eventDate,
                                                node: node,
                                                targetNode: node
                                            }"/>
                                    </li>
                                </f:for>
                            </ul>
                        </div>
                    </f:then>
                    <f:else>
                        <div class="tb-event-list__body relative">
                            <ul
                                data-toubiz-events-list-items
                                class="tb-event-list__items overflow-hidden m-0 p-0 opacity-0 max-h-xs">

                                <f:for each="{eventDates}" as="eventDate" iteration="iterator">
                                    <vh:render
                                        partial="EventDates/ListItem"
                                        arguments="{
                                        eventDate: eventDate,
                                        targetNode: node,
                                        index: iterator.index
                                    }" />

                                </f:for>
                            </ul>

                            <svg
                                data-toubiz-load-spinner
                                class="c-icon tb-load-spinner text-secondary"
                                aria-hidden="true">

                                <use xlink:href="#tb-event-icon-loading" />
                            </svg>
                        </div>
                    </f:else>
                </f:if>

            </f:then>
            <f:else>
                <p class="text-center mt-4">
                    <f:translate
                        id="eventsToday.noEvents"
                        package="Newland.Toubiz.Events.Neos"
                        source="Views/Events/Index" />
                </p>
            </f:else>
        </f:if>
    </div>
</div>
