{namespace neos=Neos\Neos\ViewHelpers}

<div class="tb-swiper tb-swiper--circle-nav-buttons" {attributes -> f:format.raw()}>

    <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) 3"
        data-toubiz-swiper-loop="(bool) false"
        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">

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

    </figure>
    <f:if condition="!{neos:rendering.inBackend()}">
        <nav 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>
        </nav>
    </f:if>
</div>