<html
    xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
    data-namespace-typo3-fluid="true"
>
    <div class="spacing-6">
        <div class="bido-container md:grid flex flex-col grid-cols-12">
            <div class="img col-span-6">
                <f:if condition="{data.ts_image.0}">
                    <f:image image="{data.ts_image.0}" alt="" loading="lazy" />
                </f:if>
            </div>
            <div class="col-span-6">
                <f:if condition="{data.ts_headline}">
                    <h2 class="headline-2-center">
                        <f:format.raw
                            ><f:format.nl2br
                                >{data.ts_headline}</f:format.nl2br
                            ></f:format.raw
                        >
                    </h2>
                </f:if>
                <f:if condition="{data.ts_items}">
                    <div class="swiper-slider testimonial-slider-cb">
                        <div class="swiper mt-14">
                            <div class="swiper-wrapper">
                                <f:for each="{data.ts_items}" as="item">
                                    <div class="swiper-slide w-full">
                                        <div
                                            class="text-template-1 max-w-[305px]"
                                        >
                                            <svg
                                                viewBox="0 -0.5 17 17"
                                                version="1.1"
                                                xmlns="http://www.w3.org/2000/svg"
                                                xmlns:xlink="http://www.w3.org/1999/xlink"
                                            >
                                                <g
                                                    id="SVGRepo_bgCarrier"
                                                    stroke-width="0"
                                                ></g>
                                                <g
                                                    id="SVGRepo_tracerCarrier"
                                                    stroke-linecap="round"
                                                    stroke-linejoin="round"
                                                ></g>
                                                <g id="SVGRepo_iconCarrier">
                                                    <title>quote</title>
                                                    <defs></defs>
                                                    <g
                                                        stroke="none"
                                                        stroke-width="1"
                                                        fill="none"
                                                        fill-rule="evenodd"
                                                    >
                                                        <g
                                                            transform="translate(1.000000, 1.000000)"
                                                        >
                                                            <path
                                                                d="M1,13.969 C0.447,13.969 0,13.534 0,13 C0,12.466 0.447,12.031 1,12.031 C3.757,12.031 5,10.83 5,8.124 L5,6.978 L1.559,6.978 C0.729,6.978 0.053,6.3 0.053,5.467 L0.053,1.511 C0.053,0.677 0.729,-0.001 1.559,-0.001 L5.494,-0.001 C6.324,-0.001 7,0.677 7,1.511 L7,8.123 C7,11.898 4.859,13.969 1,13.969 L1,13.969 Z"
                                                                class="si-glyph-fill"
                                                            ></path>
                                                            <path
                                                                d="M10,13.969 C9.447,13.969 9,13.534 9,13 C9,12.466 9.447,12.031 10,12.031 C12.757,12.031 14,10.83 14,8.124 L14,6.947 L10.533,6.947 C9.699,6.947 9.021,6.271 9.021,5.441 L9.021,1.505 C9.021,0.675 9.699,-0.001 10.533,-0.001 L14.488,-0.001 C15.322,-0.001 16,0.675 16,1.505 L16,8.123 C16,11.898 13.859,13.969 10,13.969 L10,13.969 Z"
                                                                class="si-glyph-fill"
                                                            ></path>
                                                        </g>
                                                    </g>
                                                </g>
                                            </svg>
                                            <h3>{item.item_title}</h3>
                                            <f:if condition="{item.item_text}">
                                                <p>
                                                    <f:format.raw
                                                        ><f:format.nl2br
                                                            >{item.item_text}</f:format.nl2br
                                                        ></f:format.raw
                                                    >
                                                </p>
                                            </f:if>
                                            <div class="line"></div>
                                            <f:if
                                                condition="{item.item_author}"
                                            >
                                                <strong
                                                    >{item.item_author}</strong
                                                >
                                            </f:if>
                                            <f:if condition="{item.item_role}">
                                                <span>{item.item_role}</span>
                                            </f:if>
                                        </div>
                                    </div>
                                </f:for>
                            </div>
                        </div>

                        <div class="pagination-area">
                            <div class="swiper-pagination"></div>
                        </div>

                        <div
                            class="slider-prev slider-arr left-7 show-lg"
                        ></div>
                        <div
                            class="slider-next slider-arr right-7 show-lg"
                        ></div>
                    </div>
                </f:if>
            </div>
        </div>
    </div>
</html>
