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

<f:if condition="{eventDates -> f:count()} > 0">
    <div class="tb-event-highlights">
        <h2 class="tb-event-highlights__title text-center">
            <f:format.raw>
                <f:translate
                    id="nextHighlights.title"
                    package="Newland.Toubiz.Events.Neos"
                    source="Views/Events/Index"/>
            </f:format.raw>
        </h2>

        <div class="tb-event-highlights__items mt-4">
            <f:if condition="{eventDates -> f:count()} >= 3">
                <f:then>
                    <vh:render section="Swiper" arguments="{_all}"/>
                </f:then>
                <f:else>
                    <vh:render section="Grid" arguments="{_all}"/>
                </f:else>
            </f:if>
        </div>
    </div>
</f:if>

<f:section name="Grid">
    <div class="o-grid o-grid--thirds">
        <f:for each="{eventDates}" as="eventDate">
            <div class="o-grid__item">
                <vh:render
                    section="CardItem"
                    arguments="{
                        eventDate: eventDate,
                        targetNode: documentNode
                    }"/>
            </div>
        </f:for>
    </div>
</f:section>

<f:section name="Swiper">
    <svg style="display: none;">
        <symbol id="tb-swiper-icon-next" viewBox="0 0 256 512"><path fill="currentColor" d="M24.707 38.101L4.908 57.899c-4.686 4.686-4.686 12.284 0 16.971L185.607 256 4.908 437.13c-4.686 4.686-4.686 12.284 0 16.971L24.707 473.9c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L41.678 38.101c-4.687-4.687-12.285-4.687-16.971 0z"/></symbol>
        <symbol id="tb-swiper-icon-prev" viewBox="0 0 256 512"><path fill="currentColor" d="M231.293 473.899l19.799-19.799c4.686-4.686 4.686-12.284 0-16.971L70.393 256 251.092 74.87c4.686-4.686 4.686-12.284 0-16.971L231.293 38.1c-4.686-4.686-12.284-4.686-16.971 0L4.908 247.515c-4.686 4.686-4.686 12.284 0 16.971L214.322 473.9c4.687 4.686 12.285 4.686 16.971-.001z"/></symbol>
        <symbol id="tb-swiper-icon-play" viewBox="0 0 24 24"><path d="M19.031 10.809a1.58 1.58 0 0 1 .756.879 1.685 1.685 0 0 1 0 1.125 1.58 1.58 0 0 1-.756.879L6.656 21a1.585 1.585 0 0 1-1.125.211 1.7 1.7 0 0 1-1-.562 1.59 1.59 0 0 1-.4-1.09V4.938a1.581 1.581 0 0 1 .422-1.143 1.725 1.725 0 0 1 1.02-.527 1.538 1.538 0 0 1 1.09.229z"/><path fill="none" d="M0 0h24v24H0z"/></symbol>
        <symbol id="tb-swiper-icon-loading" viewBox="0 0 512 512"><path d="M460.115 373.846l-6.941-4.008c-5.546-3.202-7.564-10.177-4.661-15.886 32.971-64.838 31.167-142.731-5.415-205.954-36.504-63.356-103.118-103.876-175.8-107.701C260.952 39.963 256 34.676 256 28.321v-8.012c0-6.904 5.808-12.337 12.703-11.982 83.552 4.306 160.157 50.861 202.106 123.67 42.069 72.703 44.083 162.322 6.034 236.838-3.14 6.149-10.75 8.462-16.728 5.011z"/></symbol>
    </svg>
    <div class="tb-swiper tb-swiper--circle-nav-buttons">
        <figure
            role="group"
            class="tb-swiper__container"
            data-toubiz-swiper
            data-toubiz-swiper-id="{documentNode.identifier}"
            data-toubiz-swiper-slides-per-view="(int) 3"
            data-toubiz-swiper-lazy-load="(bool) false"
            data-toubiz-swiper-space-between="(int) 16"
            data-toubiz-swiper-loop="(bool) false"
            data-toubiz-swiper-limit-shake="(bool) false">

            <div class="tb-swiper__wrapper">
                <f:for each="{eventDates}" as="eventDate">
                    <figure class="tb-swiper__slide">
                        <vh:render
                            section="CardItem"
                            arguments="{
                                eventDate: eventDate,
                                targetNode: documentNode
                            }"/>

                    </figure>
                </f:for>
            </div>
        </figure>
        <nav class="tb-swiper__navigation" aria-label="Slide Navigation">

            <button class="tb-swiper__button tb-swiper__button--prev js-swiper-prev-{documentNode.identifier}">
                <span>
                    <svg class="c-icon tb-swiper__button-icon" role="img"
                         aria-labelledby="tb-swiper-prev">
                        <title id="tb-swiper-prev">Go to previous slide</title>
                        <use xlink:href="#tb-swiper-icon-prev"></use>
                    </svg>
                </span>
            </button>
            <button class="tb-swiper__button tb-swiper__button--next js-swiper-next-{documentNode.identifier}">
                <span>
                    <svg class="c-icon tb-swiper__button-icon" role="img"
                         aria-labelledby="tb-swiper-next">
                        <title id="tb-swiper-next">Go to next slide</title>
                        <use xlink:href="#tb-swiper-icon-next"></use>
                    </svg>
                </span>
            </button>
        </nav>
    </div>
</f:section>

<f:section name="CardItem">
    <events:link.eventDate
        date="{eventDate}"
        currentNode="{targetNode}"
        class="tb-card"
        additionalAttributes="{
        'itemscope': '',
        'itemtype': 'http://schema.org/Event'
    }">

        <f:if condition="{eventDate.event.media.0.sourceUri}">
            <f:then>
                <img
                    data-src="{eventDate.event.media.0.sourceUri}"
                    title="{eventDate.event.media.0.title}"
                    alt="{eventDate.event.media.0.title}"
                    class="tb-card__image lazyload"
                    itemprop="image"/>

            </f:then>
            <f:else>
                <div class="tb-card__image tb-card__image--fallback">
                    <svg class="c-icon">
                        <use xlink:href="#icon-image"></use>
                    </svg>
                </div>
            </f:else>
        </f:if>

        <ul class="tb-card__category-list">
            <f:for each="{eventDate.event.categories}" as="category">
                <li class="tb-card__category-item">
                    {category.title}
                </li>
            </f:for>
        </ul>

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

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

                <f:if condition="{eventDate.event.endsOnSameDay}">
                    <f:else>
                        –
                        <f:format.date
                            date="{eventDate.event.endsAt}"
                            cldrFormat="E, dd. MMMM yyyy"
                            forceLocale="{targetNode.context.dimensions.language.0}"/>

                    </f:else>
                </f:if>
                <vh:render partial="EventDates/Time" arguments="{eventDate: eventDate, prefix: '|', suffix: ''}"/>
            </p>

            <h3 class="tb-card__title" itemprop="name">
                {eventDate.event.title}
            </h3>

            <div
                class="tb-card__copy"
                itemprop="location"
                itemscope
                itemtype="http://schema.org/Place">

                <p>
                    <f:if condition="{eventDate.event.location.name}">
                        <strong itemprop="name">
                            {eventDate.event.location.name}
                        </strong>

                        |
                    </f:if>

                    <f:if condition="{eventDate.event.location}">
                    <span itemprop="address" content="{eventDate.event.location.fullAddress}">
                        {eventDate.event.location.city}
                    </span>
                    </f:if>
                </p>
            </div>
        </div>
    </events:link.eventDate>
</f:section>