<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="website.s_dynamic_snippet.carousel.arrows">
        <a t-attf-href="##{unique_id}" class="carousel-control-prev position-md-absolute w-auto" data-bs-slide="prev" role="button" aria-label="Previous" title="Previous">
            <span class="oi oi-chevron-left ms-md-n4 rounded-pill p-3 bg-700"/>
            <span class="visually-hidden">Previous</span>
        </a>
        <a t-attf-href="##{unique_id}" class="carousel-control-next position-md-absolute w-auto" data-bs-slide="next" role="button" aria-label="Next" title="Next">
            <span class="oi oi-chevron-right me-md-n4 rounded-pill p-3 bg-700"/>
            <span class="visually-hidden">Next</span>
        </a>
    </t>
    <t t-name="website.s_dynamic_snippet.carousel.base">
        <div t-att-id="unique_id" t-attf-class="carousel slide #{extraCarouselClass || ''}"
             t-att-style="extraCarouselStyle"
             t-att-data-bs-interval="interval" data-bs-ride="carousel">
            <!-- Content -->
            <t t-set="slideSize" t-value="rowSize * rowPerSlide" />
            <t t-set="slideIndexGenerator" t-value="Array.from(Array(Math.ceil(data.length/slideSize)).keys())"/>
            <t t-set="rowIndexGenerator" t-value="Array.from(Array(rowPerSlide).keys())"/>
            <t t-set="colIndexGenerator" t-value="Array.from(Array(rowSize).keys())"/>
            <div t-attf-class="carousel-inner w-100 mx-auto #{extraInnerClass || ''}" role="listbox"
                 aria-label="Carousel">
                <t t-foreach="slideIndexGenerator" t-as="slideIndex" t-key="slideIndex_index">
                    <t t-set="slideOffset" t-value="slideIndex * slideSize"/>
                    <div t-attf-class="carousel-item #{extraClasses || ''} #{slideIndex_first ? 'active' : ''}" role="option">
                        <t t-foreach="rowIndexGenerator" t-as="rowIndex" t-key="rowIndex_index">
                            <t t-set="rowOffset" t-value="slideOffset + (rowIndex * rowSize)"/>
                            <t t-if="rowOffset &lt; data.length">
                                <div t-attf-class="s_dynamic_snippet_row row g-3 #{extraRowClass || ''}">
                                    <t t-foreach="colIndexGenerator" t-as="colIndex" t-key="colIndex_index">
                                        <t t-set="itemIndex" t-value="rowOffset + colIndex"/>
                                        <t t-if="itemIndex &lt; data.length">
                                            <div t-attf-class="#{colClass || ''}">
                                                <t t-out="data[itemIndex]"/>
                                            </div>
                                        </t>
                                    </t>
                                </div>
                            </t>
                        </t>
                    </div>
                </t>
            </div>
            <!-- Controls -->
            <t t-if='slideIndexGenerator.length > minControlValue'>
                <t t-if="arrowPosition === 'bottom'">
                    <div class="s_dynamic_snippet_arrow_bottom px-3 px-md-0 pt-2 d-flex justify-content-between">
                        <t t-call="website.s_dynamic_snippet.carousel.arrows">
                            <t t-set="unique_id" t-value="unique_id" />
                        </t>
                    </div>
                </t>
                <t t-else="">
                    <t t-call="website.s_dynamic_snippet.carousel.arrows">
                        <t t-set="unique_id" t-value="unique_id" />
                    </t>
                </t>
            </t>
        </div>
    </t>
    <t t-name="website.s_dynamic_snippet.carousel.page_scroll">
        <t t-call="website.s_dynamic_snippet.carousel.base">
            <t t-set="rowSize" t-value="chunkSize"/>
            <t t-set="extraInnerClass" t-value="'row'"/>
            <t t-set="colClass"
               t-value="'d-flex flex-grow-0 flex-shrink-0 col-' + Math.trunc(12 / rowSize).toString()"/>
            <t t-set="minControlValue" t-value="1"/>
        </t>
    </t>
    <t t-name="website.s_dynamic_snippet.carousel.single_scroll">
        <t t-call="website.s_dynamic_snippet.carousel.base">
            <t t-set="rowSize" t-value="1"/>
            <t t-set="extraCarouselClass" t-value="'o_carousel_multi_items'"/>
            <t t-set="extraCarouselStyle"
               t-value="'--o-carousel-item-width-percentage: ' + (100.0 / chunkSize).toFixed(2) + '%;'"/>
            <t t-set="extraRowClass" t-value="'mx-0'"/>
            <t t-set="colClass" t-value="'d-flex flex-grow-1 flex-shrink-0'"/>
            <t t-set="minControlValue" t-value="chunkSize"/>
        </t>
    </t>
    <t t-name="website.s_dynamic_snippet.carousel">
        <t t-if="scrollMode === 'single'"
           t-call="website.s_dynamic_snippet.carousel.single_scroll"/>
        <t t-else="" t-call="website.s_dynamic_snippet.carousel.page_scroll"/>
    </t>
</templates>
