<?xml version="1.0" encoding="UTF-8"?>
<odoo>

    <template id="website_sale.s_dynamic_snippet_category_preview_data" name="Category List Preview Data">
        <div
            class="o_category_container d-grid gap-2 rounded-2"
            contenteditable="false"
            style="--DynamicCategory-columns: 4; grid-auto-rows: minmax(5vh, auto);"
        >
            <div class="d-contents o_not_editable" contenteditable="false">
                <div
                    class="s_dynamic_category_item bg-black position-relative overflow-hidden"
                    role="article"
                    style="grid-row: span 2;"
                >
                    <img
                        name="category_image"
                        alt="Desks"
                        class="o_category_image img-fluid position-absolute w-100 h-100 object-fit-cover"
                        src="/website_sale/static/src/img/categories/desks.jpg"
                    />
                    <div
                        class="position-relative w-100 h-100 p-3 bg-black-25"
                    >
                        <h4 class="position-absolute start-50 top-50 translate-middle">Desks</h4>
                    </div>
                </div>
                <div
                    class="s_dynamic_category_item bg-black position-relative overflow-hidden"
                    role="article"
                    style="grid-row: span 2;"
                >
                    <img
                        name="category_image"
                        alt="Furnitures"
                        class="o_category_image img-fluid position-absolute w-100 h-100 object-fit-cover"
                        src="/website_sale/static/src/img/categories/furnitures.jpg"
                    />
                    <div class="position-relative w-100 h-100 p-3 bg-black-25">
                        <h4 class="position-absolute start-50 top-50 translate-middle">Furnitures</h4>
                    </div>
                </div>
                <div
                    class="s_dynamic_category_item bg-black position-relative overflow-hidden"
                    role="article"
                    style="grid-row: span 2;"
                >
                    <img
                        name="category_image"
                        alt="Boxes"
                        class="o_category_image img-fluid position-absolute w-100 h-100 object-fit-cover"
                        src="/website_sale/static/src/img/categories/boxes.jpg"
                    />
                    <div class="position-relative w-100 h-100 p-3 bg-black-25">
                        <h4 class="position-absolute start-50 top-50 translate-middle">Boxes</h4>
                    </div>
                </div>
                <div
                    class="s_dynamic_category_item bg-black position-relative overflow-hidden"
                    role="article"
                    style="grid-row: span 2;"
                >
                    <img
                        name="category_image"
                        alt="Drawers"
                        class="o_category_image img-fluid position-absolute w-100 h-100 object-fit-cover"
                        src="/website_sale/static/src/img/categories/drawers.jpg"
                    />
                    <div class="position-relative w-100 h-100 p-3 bg-black-25">
                        <h4 class="position-absolute start-50 top-50 translate-middle">Drawers</h4>
                    </div>
                </div>
                <div
                    class="s_dynamic_category_item position-relative bg-black overflow-hidden"
                    role="article"
                    style="grid-row: span 2;"
                >
                    <img
                        name="category_image"
                        alt="Cabinets"
                        class="o_category_image img-fluid position-absolute w-100 h-100 object-fit-cover"
                        src="/website_sale/static/src/img/categories/cabinets.jpg"
                    />
                    <div class="position-relative w-100 h-100 p-3 bg-black-25">
                        <h4 class="position-absolute start-50 top-50 translate-middle">Cabinets</h4>
                    </div>
                </div>
                <div
                    class="s_dynamic_category_item position-relative bg-black overflow-hidden"
                    role="article"
                    style="grid-row: span 2;"
                >
                    <img
                        name="category_image"
                        alt="Bins"
                        class="o_category_image img-fluid position-absolute w-100 h-100 object-fit-cover"
                        src="/website_sale/static/src/img/categories/bins.jpg"
                    />
                    <div class="position-relative w-100 h-100 p-3 bg-black-25">
                        <h4 class="position-absolute start-50 top-50 translate-middle">Bins</h4>
                    </div>
                </div>
                <div
                    class="s_dynamic_category_item position-relative bg-black overflow-hidden"
                    role="article"
                    style="grid-row: span 2;"
                >
                    <img
                        name="category_image"
                        alt="Lamps"
                        class="o_category_image img-fluid position-absolute w-100 h-100 object-fit-cover"
                        src="/website_sale/static/src/img/categories/lamps.jpg"
                    />
                    <div class="position-relative w-100 h-100 p-3 bg-black-25">
                        <h4 class="position-absolute start-50 top-50 translate-middle">Lamps</h4>
                    </div>
                </div>
                <div
                    class="s_dynamic_category_item position-relative bg-black overflow-hidden"
                    role="article"
                    style="grid-row: span 2;"
                >
                    <img
                        name="category_image"
                        alt="Services"
                        class="o_category_image img-fluid position-absolute w-100 h-100 object-fit-cover"
                        src="/website_sale/static/src/img/products_demo/warranty.jpg"
                    />
                    <div class="position-relative w-100 h-100 p-3 bg-black-25">
                        <h4 class="position-absolute start-50 top-50 translate-middle">Services</h4>
                    </div>
                </div>
            </div>
        </div>
    </template>

</odoo>
