{namespace neos=Neos\Neos\ViewHelpers}


<f:if condition="{displayAsSlider}">
    <f:then>
        <div class="tb-swiper tb-swiper--circle-nav-buttons">

            <figure
                {f:if(condition: '{neos:rendering.inBackend()}', then: '', else: 'data-toubiz-swiper')}
                data-toubiz-swiper-id="{node.identifier}"
                data-toubiz-swiper-slides-per-view="(int) 4"
                data-toubiz-swiper-loop="(bool) true"
                data-toubiz-swiper-limit-shake="(bool) true"
                data-toubiz-swiper-space-between="(int) 16"
                data-toubiz-swiper-free-mode="(bool) true"
                class="tb-swiper__container">

                {gridItems -> f:format.raw()}

            </figure>
            <f:if condition="!{neos:rendering.inBackend()}">
                <div class="tb-swiper__navigation">
                    <button class="tb-swiper__button tb-swiper__button--prev js-swiper-prev-{node.identifier}">
                        <span>
                            <svg class="c-icon tb-swiper__button-icon"
                                    aria-labelledby="tb-swiper-prev"
                                    focusable="false">

                                <title id="tb-swiper-prev">Vorheriger Teaser</title>
                                <use xlink:href="#icon-angle-left"/>
                            </svg>
                        </span>
                    </button>
                    <button class="tb-swiper__button tb-swiper__button--next js-swiper-next-{node.identifier}">
                        <span>
                            <svg class="c-icon tb-swiper__button-icon"
                                    aria-labelledby="tb-swiper-next"
                                    focusable="false">

                                <title id="tb-swiper-next">Nächster Teaser</title>
                                <use xlink:href="#icon-angle-right"/>
                            </svg>
                        </span>
                    </button>
                </div>
            </f:if>
        </div>
    </f:then>
    <f:else>
        <div class="c-partner-grid {f:if(condition: avoidLineBreak, then: 'c-partner-grid--no-line-break', else: '')}">
            {gridItems -> f:format.raw()}
        </div>
    </f:else>
</f:if>