<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
<t t-name="website.website_loader">
    <div t-if="state.isVisible"
         class="o_website_loader_container position-fixed fixed-top fixed-left h-100 w-100 d-flex"
         t-att-class="currentWaitingMessage.flag ? ('o_website_loader_container_' + currentWaitingMessage.flag) : ''">
        <div class="o_website_loader_container_content position-relative d-flex flex-column p-3 p-lg-5">
            <a t-if="state.showCloseButton"
               href="#" class="btn" style="position: absolute; right: 0; top: 0; margin: 15px;"
               t-on-click="close">
                <i class="oi oi-close oi-large" role="presentation"/>
            </a>

            <div class="o_website_loader_odoo_logo mb-5" style="height: 31px; width: 78px;"/>

            <div t-if="state.showWaitingMessages" t-out="currentWaitingMessage.title" class="h4-fs text-muted mb-3"/>
            <div t-elif="state.title" t-out="state.title"/>
            <div t-else="">Building your website...</div>
            <div class="mt-3"/>
            <div t-if="['text', 'images', 'generic'].includes(currentWaitingMessage.flag)" class="o_website_loader_tip d-flex gap-2 h3-fs mb-2">
                <div><i class="o_website_loader_check fa fa-check fa-fw text-success" role="presentation"/></div>
                <span class="o_website_loader_done">Applying your colors and design.</span>
            </div>
            <div t-if="['text', 'generic'].includes(currentWaitingMessage.flag)" class="o_website_loader_tip d-flex gap-2 h3-fs mb-2">
                <div><i class="o_website_loader_check fa fa-check fa-fw text-success" role="presentation"/></div>
                <span class="o_website_loader_done">Searching your images.</span>
            </div>
            <div t-if="['text', 'generic'].includes(currentWaitingMessage.flag)" class="o_website_loader_tip d-flex gap-2 h3-fs mb-2">
                <div><i class="o_website_loader_check fa fa-check fa-fw text-success" role="presentation"/></div>
                <span class="o_website_loader_done">Adapting Building Blocks.</span>
            </div>
            <div t-if="['generic'].includes(currentWaitingMessage.flag)" class="o_website_loader_tip d-flex gap-2 h3-fs mb-2">
                <div><i class="o_website_loader_check fa fa-check fa-fw text-success" role="presentation"/></div>
                <span class="o_website_loader_done">Generating inspiring text.</span>
            </div>
            <div t-if="state.showWaitingMessages" class="o_website_loader_tip d-flex gap-2 h3-fs">
                <div><i class="fa fa-circle-o-notch fa-spin fa-fw"/></div><div><t t-out="currentWaitingMessage.description"/></div>
            </div>

            <p class="o_website_loader_tip mt-auto mb-3">
                <t t-if="state.bottomMessageTemplate !== undefined">
                    <t t-if="state.bottomMessageTemplate" t-call="{{state.bottomMessageTemplate}}"/>
                </t>
                <t t-elif="state.showTips">
                    <b>TIP</b>: Once loaded, follow the
                    <span class="o_tour_pointer o_bottom me-3">
                        <span class="o_tour_pointer_tip position-absolute mt-n1"></span>
                    </span>
                    pointer to discover features.
                </t>
            </p>
            <div t-if="state.showLoader" class="o_website_loader_progress progress position-relative rounded-pill mb-3">
                <div role="progressbar"
                     aria-label="Installing your features"
                     class="progress-bar rounded-0"
                     t-att-aria-valuemax="100"
                     t-att-aria-valuenow="state.progressPercentage"
                     t-attf-style="width: #{state.progressPercentage}%"/>
            </div>
        </div>
        <div id="o_website_loader_animations_steps" class="d-none d-lg-block position-relative flex-grow-1 overflow-hidden" role="presentation">
            <div id="o_website_loader_step_colors">
                <t t-foreach="[...Array(64).keys()]" t-as="cell" t-key="cell">
                    <span/>
                </t>
            </div>
            <div id="o_website_loader_step_images" class="flex-column h-100">
                <div class="o_website_loader_filmstrip d-flex w-100 overflow-hidden">
                    <div class="o_website_loader_filmstrip_inner d-flex flex-shrink-0 flex-grow-0">
                        <img src="/website/static/src/img/website_loader/1.webp" alt="Image 1"/>
                        <img src="/website/static/src/img/website_loader/2.webp" alt="Image 2"/>
                        <img src="/website/static/src/img/website_loader/3.jpg" alt="Image 3"/>
                        <img src="/website/static/src/img/website_loader/8.webp" alt="Image 8"/>
                        <img src="/website/static/src/img/website_loader/5.webp" alt="Image 5"/>
                        <img src="/website/static/src/img/website_loader/6.webp" alt="Image 6"/>
                        <img src="/website/static/src/img/website_loader/7.webp" alt="Image 7"/>
                        <img src="/website/static/src/img/website_loader/4.webp" alt="Image 4"/>

                        <!-- Duplicate images for seamless looping -->
                        <img src="/website/static/src/img/website_loader/1.webp" alt="Image 1"/>
                        <img src="/website/static/src/img/website_loader/2.webp" alt="Image 2"/>
                        <img src="/website/static/src/img/website_loader/3.jpg" alt="Image 3"/>
                        <img src="/website/static/src/img/website_loader/8.webp" alt="Image 8"/>
                        <img src="/website/static/src/img/website_loader/5.webp" alt="Image 5"/>
                        <img src="/website/static/src/img/website_loader/6.webp" alt="Image 6"/>
                        <img src="/website/static/src/img/website_loader/7.webp" alt="Image 7"/>
                        <img src="/website/static/src/img/website_loader/4.webp" alt="Image 4"/>
                    </div>
                </div>
                <div class="o_website_loader_filmstrip o_website_loader_filmstrip_middle d-flex w-100 overflow-hidden">
                    <div class="o_website_loader_filmstrip_inner d-flex flex-shrink-0 flex-grow-0">
                        <img src="/web/image/website.s_three_columns_default_image_1" alt=""/>
                        <img src="/web/image/website.s_showcase_default_image" alt=" "/>
                        <img src="/web/image/website.s_image_title_default_image" alt=""/>
                        <img src="/web/image/website.library_image_10" alt=" "/>

                        <!-- Duplicate images for seamless looping -->
                        <img src="/web/image/website.s_three_columns_default_image_1" alt=""/>
                        <img src="/web/image/website.s_showcase_default_image" alt=" "/>
                        <img src="/web/image/website.s_image_title_default_image" alt=""/>
                        <img src="/web/image/website.library_image_10" alt=" "/>
                    </div>
                </div>
                <div class="o_website_loader_filmstrip d-flex w-100 overflow-hidden mt-auto">
                    <div class="o_website_loader_filmstrip_inner d-flex flex-shrink-0 flex-grow-0">
                        <img src="/website/static/src/img/website_loader/8.webp" alt="Image 8"/>
                        <img src="/website/static/src/img/website_loader/7.webp" alt="Image 7"/>
                        <img src="/website/static/src/img/website_loader/6.webp" alt="Image 6"/>
                        <img src="/website/static/src/img/website_loader/5.webp" alt="Image 5"/>
                        <img src="/website/static/src/img/website_loader/4.webp" alt="Image 4"/>
                        <img src="/website/static/src/img/website_loader/3.jpg" alt="Image 3"/>
                        <img src="/website/static/src/img/website_loader/2.webp" alt="Image 2"/>
                        <img src="/website/static/src/img/website_loader/1.webp" alt="Image 1"/>

                        <!-- Duplicate images for seamless looping -->
                        <img src="/website/static/src/img/website_loader/8.webp" alt="Image 8"/>
                        <img src="/website/static/src/img/website_loader/7.webp" alt="Image 7"/>
                        <img src="/website/static/src/img/website_loader/6.webp" alt="Image 6"/>
                        <img src="/website/static/src/img/website_loader/5.webp" alt="Image 5"/>
                        <img src="/website/static/src/img/website_loader/4.webp" alt="Image 4"/>
                        <img src="/website/static/src/img/website_loader/3.jpg" alt="Image 3"/>
                        <img src="/website/static/src/img/website_loader/2.webp" alt="Image 2"/>
                        <img src="/website/static/src/img/website_loader/1.webp" alt="Image 1"/>
                    </div>
                </div>
            </div>
            <div id="o_website_loader_step_text">
                <span class="o_website_loader_text_content">A</span>
                <span class="o_website_loader_text_content start-50">B</span>
                <span class="o_website_loader_text_content w-100 text-center">C</span>
            </div>
            <div id="o_website_loader_step_generic">
                <div class="o_website_loader_loader">
                    <div class="o_website_loader_circle"></div>
                    <div class="o_website_loader_circle_mask overflow-hidden">
                        <div class="o_website_loader_circle_line"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</t>
</templates>
