{namespace neos=Neos\Neos\ViewHelpers}

<f:if condition="{articles -> f:count()} > 4 && {enableSwiper} && {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="poi-item-list-{id}"
                data-toubiz-swiper-slides-per-view="(int) 4"
                data-toubiz-swiper-lazy-load="(bool) false"
                data-toubiz-swiper-space-between="(int) 16"
                data-toubiz-swiper-limit-shake="(bool) false">

                <div class="tb-swiper__wrapper">
                    <f:for each="{articles}" as="article">
                        <figure class="tb-swiper__slide">
                            <f:render partial="PointOfInterests/Teaser" arguments="{article: article}"/>
                        </figure>
                    </f:for>
                    <figure class="tb-swiper__slide">
                        {additionalSlides -> f:format.raw()}
                    </figure>
                </div>
            </figure>

            <nav
                class="tb-swiper__navigation"
                aria-label="Slide Navigation">

                <button class="tb-swiper__button tb-swiper__button--prev js-swiper-prev-poi-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-poi-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>
        <ul class="o-grid o-grid--fourths list-reset p-0 m-0 -mx-2">
            <f:for each="{articles}" as="article">
                <li class="o-grid__item">
                    <f:render partial="PointOfInterests/Teaser" arguments="{article: article}"/>
                </li>
            </f:for>
        </ul>
    </f:else>
</f:if>