{namespace neos=Neos\Neos\ViewHelpers}

<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>

<svg style="display: none;">
    <symbol id="tb-gallery-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-gallery-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-gallery-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>
    <symbol id="tb-gallery-icon-close" viewBox="0 0 24 24"><path d="M19.667 5.578L18.089 4l-6.255 6.255L5.578 4 4 5.578l6.255 6.255L4 18.089l1.578 1.578 6.255-6.255 6.255 6.255 1.578-1.578-6.255-6.255z"/><path fill="none" d="M0 0h24v24H0z"/></symbol>
</svg>

<div class="o-container--full {marginTop}">
    <f:if condition="{neos:rendering.inBackend()}">
        <f:then>
            {items -> f:format.raw()}
        </f:then>
        <f:else>
            <div
                class="tb-swiper"
                data-toubiz-gallery>

                <figure
                    role="group"
                    class="tb-swiper__container"
                    data-toubiz-swiper
                    data-toubiz-swiper-id="{node.identifier}"
                    data-toubiz-swiper-slides-per-view="(int) 3"
                    data-toubiz-swiper-lazy-load="(bool) false"
                    data-toubiz-swiper-limit-shake="(bool) true"
                    data-toubiz-swiper-loop="(bool) true"
                    data-toubiz-swiper-height="450"
                    data-toubiz-swiper-enable-pagination="false">

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

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

                    <button class="tb-swiper__button tb-swiper__button--prev js-swiper-prev-{node.identifier}">
                        <span>
                            <svg
                                class="c-icon tb-swiper__button-icon"
                                role="img"
                                aria-labelledby="tb-swiper-prev"
                                focusable="false">

                                <title id="tb-swiper-prev">Go to previous slide</title>
                                <use xlink:href="#icon-angle-left"></use>
                            </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"
                                role="img"
                                aria-labelledby="tb-swiper-next"
                                focusable="false">

                                <title id="tb-swiper-next">Go to next slide</title>
                                <use xlink:href="#icon-angle-right"></use>
                            </svg>
                        </span>
                    </button>
                </nav>
            </div>
        </f:else>
    </f:if>
</div>