<html
    xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
    data-namespace-typo3-fluid="true"
>
    <div class="spacing-7">
        <f:if condition="{data.slider_title}">
            <h2 class="headline-center">{data.slider_title}</h2>
        </f:if>
        <f:if condition="{data.slider_subtitle}">
            <p class="sub-headline-center mt-5">{data.slider_subtitle}</p>
        </f:if>

        <f:if condition="{data.slider_products}">
            <f:variable
                name="layoutReverse"
                value="{data.slider_layout} == 'image_right'"
            />
            <div class="product-slider-1 swiper-slider">
                <div class="swiper mt-14">
                    <div class="swiper-wrapper">
                        <f:for each="{data.slider_products}" as="product">
                            <div class="swiper-slide w-full">
                                <div
                                    class="{f:if(condition: layoutReverse, then: 'md:!flex-row-reverse', else: '')}"
                                >
                                    <!-- Image block (order depends on slider_layout) -->
                                    <div
                                        class="slider-img flex justify-center w-full"
                                    >
                                        <div class="img">
                                            <f:if
                                                condition="{product.product_image.0}"
                                            >
                                                <f:image
                                                    image="{product.product_image.0}"
                                                    alt="{product.product_title}"
                                                    class="w-full"
                                                    loading="lazy"
                                                />
                                            </f:if>
                                        </div>
                                    </div>
                                    <!-- Product detail box (bordered) -->
                                    <div class="slider-product-detail">
                                        <div class="price">
                                            <span
                                                ><f:if
                                                    condition="{product.product_price}"
                                                    >{product.product_price}</f:if
                                                ></span
                                            >
                                        </div>
                                        <div class="explanation">
                                            <f:if
                                                condition="{product.product_title}"
                                            >
                                                <strong
                                                    >{product.product_title}</strong
                                                >
                                            </f:if>
                                            <f:if
                                                condition="{product.product_description}"
                                            >
                                                <p>
                                                    {product.product_description}
                                                </p>
                                            </f:if>
                                        </div>
                                        <div class="btn-area">
                                            <f:if
                                                condition="{product.product_link}"
                                            >
                                                <f:link.typolink
                                                    parameter="{product.product_link}"
                                                    >ADD TO
                                                    CART</f:link.typolink
                                                >
                                            </f:if>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </f:for>
                    </div>
                </div>

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

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