{namespace neos=Neos\Neos\ViewHelpers}
{namespace vh=Newland\NeosViewHelpers\ViewHelpers}
{namespace common=Newland\Toubiz\Common\Neos\ViewHelpers}

<f:layout name="Default" />

<f:section name="Content">
    <common:slot.render slot="aboveTeaserList" context="{ events: events }" />
    <f:if condition="(({eventDates -> f:count()} > 4 && {teaserStyle} === 'stacked')
        || ({eventDates -> f:count()} > 3 && {teaserStyle} === 'poster'))
        && {node.context.inBackend} == false">
        <f:then>
            <div class="tb-swiper tb-swiper--circle-nav-buttons">
                <figure
                    role="group"
                    class="tb-swiper__container"
                    data-toubiz-swiper
                    data-toubiz-swiper-id="event-item-list-{id}"
                    data-toubiz-swiper-slides-per-view="{f:if(condition: '{teaserStyle} === "poster"', then: '(int) 3', else: '(int) 4')}"
                    data-toubiz-swiper-space-between="(int) 16"
                    data-toubiz-swiper-limit-shake="(bool) false">

                    <div class="tb-swiper__wrapper">
                        <f:for each="{eventDates}" as="date">
                            <figure class="tb-swiper__slide">
                                <vh:render
                                    partial="EventDates/SwiperItem"
                                    arguments="{
                                        eventDate: date,
                                        targetNode: documentNode,
                                        teaserStyle: teaserStyle
                                    }"
                                />
                            </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-event-item-list-{id}">
                        <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-event-item-list-{id}">
                        <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:then>

        <f:else>
            <div class="o-grid {f:if(condition: '{teaserStyle} === "poster"', then: 'o-grid--thirds', else: 'o-grid--fourths')}">
                <f:for each="{eventDates}" as="date">
                    <figure class="o-grid__item">
                        <vh:render
                            partial="EventDates/SwiperItem"
                            arguments="{
                                eventDate: date,
                                targetNode: documentNode,
                                teaserStyle: teaserStyle
                            }"
                        />
                    </figure>
                </f:for>
            </div>
        </f:else>
    </f:if>

    <common:slot.render slot="belowTeaserList" context="{ events: events }" />
</f:section>