<?xml version="1.0"?>
<t name="Quotes" t-name="website.s_quotes_carousel">
    <section class="s_quotes_carousel_wrapper" data-vxml="001" data-vcss="002">
        <t t-set="uniq" t-value="datetime.datetime.now().microsecond"/>
        <div t-attf-id="myQuoteCarousel{{uniq}}" class="s_quotes_carousel s_carousel_boxed carousel carousel-dark slide o_cc o_cc2" data-bs-ride="true" data-bs-interval="10000">
            <!-- Content -->
            <div class="carousel-inner">
                <!-- #01 -->
                <div class="carousel-item active oe_img_bg o_bg_img_center pt80 pb80" style="background-image: url('/web/image/website.s_quotes_carousel_demo_image_0'); background-position: 50% 50%;" data-name="Slide">
                    <blockquote data-name="Blockquote" data-snippet="s_blockquote" class="s_blockquote s_blockquote_with_icon o_cc o_cc1 o_animable position-relative d-flex flex-column gap-4 w-50 mx-auto p-5 fst-normal" data-vcss="001">
                        <div class="s_blockquote_line_elt position-absolute top-0 start-0 bottom-0 bg-o-color-1"/>
                        <div class="s_blockquote_wrap_icon position-absolute top-0 start-50 translate-middle w-100">
                            <i class="s_blockquote_icon fa fa-quote-right d-block mx-auto rounded bg-o-color-1" role="img"/>
                        </div>
                        <p class="s_blockquote_quote my-auto h4-fs" style="text-align:center;">" Write a quote here from one of your customers. Quotes are a great way to build confidence in your products or services. "</p>
                        <div class="s_blockquote_infos d-flex gap-2 flex-column align-items-center w-100 text-center">
                            <img src="/web/image/website.s_quotes_carousel_demo_image_3" class="s_blockquote_avatar img rounded-circle" alt=""/>
                            <div class="s_blockquote_author">
                                <span class="o_small">
                                    <strong>Jane DOE</strong><br/>
                                    <span class="text-muted">CEO of MyCompany</span>
                                </span>
                            </div>
                        </div>
                    </blockquote>
                </div>
                <!-- #02 -->
                <div class="carousel-item oe_img_bg o_bg_img_center pt80 pb80" style="background-image: url('/web/image/website.s_quotes_carousel_demo_image_1'); background-position: 50% 50%;" data-name="Slide">
                    <blockquote data-name="Blockquote" data-snippet="s_blockquote" class="s_blockquote s_blockquote_with_icon o_cc o_cc1 o_animable position-relative d-flex flex-column gap-4 w-50 mx-auto p-5 fst-normal" data-vcss="001">
                        <div class="s_blockquote_line_elt position-absolute top-0 start-0 bottom-0 bg-o-color-1"/>
                        <div class="s_blockquote_wrap_icon position-absolute top-0 start-50 translate-middle w-100">
                            <i class="s_blockquote_icon fa fa-quote-right d-block mx-auto rounded bg-o-color-1" role="img"/>
                        </div>
                        <p class="s_blockquote_quote my-auto h4-fs" style="text-align:center;">" Write a quote here from one of your customers. Quotes are a great way to build confidence in your products or services. "</p>
                        <div class="s_blockquote_infos d-flex gap-2 flex-column align-items-center w-100 text-center">
                            <img src="/web/image/website.s_quotes_carousel_demo_image_4" class="s_blockquote_avatar img rounded-circle" alt=""/>
                            <div class="s_blockquote_author">
                                <span class="o_small">
                                    <strong>John DOE</strong><br/>
                                    <span class="text-muted">CCO of MyCompany</span>
                                </span>
                            </div>
                        </div>
                    </blockquote>
                </div>
                <!-- #03 -->
                <div class="carousel-item oe_img_bg o_bg_img_center pt80 pb80" style="background-image: url('/web/image/website.s_quotes_carousel_demo_image_2'); background-position: 50% 50%;" data-name="Slide">
                    <blockquote data-name="Blockquote" data-snippet="s_blockquote" class="s_blockquote s_blockquote_with_icon o_cc o_cc1 o_animable position-relative d-flex flex-column gap-4 w-50 mx-auto p-5 fst-normal" data-vcss="001">
                        <div class="s_blockquote_line_elt position-absolute top-0 start-0 bottom-0 bg-o-color-1"/>
                        <div class="s_blockquote_wrap_icon position-absolute top-0 start-50 translate-middle w-100">
                            <i class="s_blockquote_icon fa fa-quote-right d-block mx-auto rounded bg-o-color-1" role="img"/>
                        </div>
                        <p class="s_blockquote_quote my-auto h4-fs" style="text-align:center;">" Write a quote here from one of your customers. Quotes are a great way to build confidence in your products or services. "</p>
                        <div class="s_blockquote_infos d-flex gap-2 flex-column align-items-center w-100 text-center">
                            <img src="/web/image/website.s_quotes_carousel_demo_image_5" class="s_blockquote_avatar img rounded-circle" alt=""/>
                            <div class="s_blockquote_author">
                                <span class="o_small">
                                    <strong>Iris DOE</strong><br/>
                                    <span class="text-muted">Manager of MyCompany</span>
                                </span>
                            </div>
                        </div>
                    </blockquote>
                </div>
            </div>
            <!-- Controls -->
            <button class="carousel-control-prev o_not_editable" contenteditable="false" t-attf-data-bs-target="#myQuoteCarousel{{uniq}}" data-bs-slide="prev" aria-label="Previous" title="Previous">
                <span class="carousel-control-prev-icon" aria-hidden="true"/>
                    <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next o_not_editable" t-attf-data-bs-target="#myQuoteCarousel{{uniq}}" data-bs-slide="next" aria-label="Next" title="Next">
                <span class="carousel-control-next-icon" aria-hidden="true"/>
                <span class="visually-hidden">Next</span>
            </button>
            <!-- Indicators -->
            <div class="carousel-indicators s_carousel_indicators_dots o_not_editable">
                <button type="button" t-attf-data-bs-target="#myQuoteCarousel{{uniq}}" data-bs-slide-to="0" class="active" aria-label="Carousel indicator"/>
                <button type="button" t-attf-data-bs-target="#myQuoteCarousel{{uniq}}" data-bs-slide-to="1" aria-label="Carousel indicator"/>
                <button type="button" t-attf-data-bs-target="#myQuoteCarousel{{uniq}}" data-bs-slide-to="2" aria-label="Carousel indicator"/>
            </div>
        </div>
    </section>
</t>

