<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <!-- Multi record preview -->
    <template id="s_dynamic_snippet_blog_posts_preview_data" name="Blogs Preview Data">
        <div class="s_dialog_preview row">
            <div class="col-12 col-sm-6 col-lg-4">
                <div class="s_blog_posts_post position-relative w-100">
                    <a class="s_blog_posts_post_cover position-relative d-block h-100 rounded shadow-sm overflow-hidden text-decoration-none text-reset ratio ratio-1x1" href="#">
                        <div class="o_record_cover_container d-flex flex-column h-100 o_colored_level o_cc w-100 bg-600 position-absolute">
                            <div class="o_record_cover_component o_record_cover_image " style="background-image: url('/website_blog/static/src/img/blog_previews/blog_1.jpg');"/>
                            <div class="s_blog_post_big_picture_infos position-absolute top-0 start-0 w-100 h-100">
                                <div class="s_blog_posts_post_cover_header d-flex flex-column justify-content-end w-100">
                                    <h3 class="s_blog_post_big_picture_title m-0 px-4 text-white">Sierra Tarahumara</h3>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-lg-4">
                <div class="s_blog_posts_post position-relative w-100">
                    <a class="s_blog_posts_post_cover position-relative d-block h-100 rounded shadow-sm overflow-hidden text-decoration-none text-reset ratio ratio-1x1" href="#">
                        <div class="o_record_cover_container d-flex flex-column h-100 o_colored_level o_cc w-100 bg-600 position-absolute">
                            <div class="o_record_cover_component o_record_cover_image " style="background-image: url('/website_blog/static/src/img/blog_previews/blog_2.jpg');"/>
                            <div class="o_record_cover_component o_record_cover_filter oe_black" style="opacity: 0.4;"/>
                            <div class="s_blog_post_big_picture_infos position-absolute top-0 start-0 w-100 h-100">
                                <div class="s_blog_posts_post_cover_header d-flex flex-column justify-content-end w-100">
                                    <h3 class="s_blog_post_big_picture_title m-0 px-4 text-white">How to choose the right hotel</h3>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-lg-4">
                <div class="s_blog_posts_post position-relative w-100">
                    <a class="s_blog_posts_post_cover position-relative d-block h-100 rounded shadow-sm overflow-hidden text-decoration-none text-reset ratio ratio-1x1" href="#">
                        <div class="o_record_cover_container d-flex flex-column h-100 o_colored_level o_cc w-100 bg-600 position-absolute">
                            <div class="o_record_cover_component o_record_cover_image " style="background-image: url('/website_blog/static/src/img/blog_previews/blog_3.jpg');"/>
                            <div class="o_record_cover_component o_record_cover_filter oe_black" style="opacity: 0.4;"/>
                            <div class="s_blog_post_big_picture_infos position-absolute top-0 start-0 w-100 h-100">
                                <div class="s_blog_posts_post_cover_header d-flex flex-column justify-content-end w-100">
                                    <h3 class="s_blog_post_big_picture_title m-0 px-4 text-white">Maui helicopter tours</h3>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </template>
    <template id="s_dynamic_snippet_blog_posts_card_preview_data" name="Blogs Preview Data">
        <div class="s_dialog_preview row">
            <div class="col-3">
                <div class="card h-100">
                    <div class="card-img-top ratio ratio-16x9">
                        <img class="img img-fluid object-fit-cover" src="/website_blog/static/src/img/blog_previews/blog_1.jpg"/>
                    </div>
                    <div class="card-body">
                        <h5 class="mb-2 mt-0">Sierra Tarahumara</h5>
                        <small class="text-muted">Mar 13, 2025</small>
                        <p>Sierra Tarahumara, popularly known as Copper Canyon is situated in Mexico. The area is a favorite destination among those...</p>
                    </div>
                    <div class="card-footer d-flex justify-content-between mt-auto border-0 p-3 pt-0 bg-transparent small">
                        <span><i class="fa fa-user-circle-o me-2" role="presentation"/> Marc Demo</span>
                        <span class="text-muted">In <a href="#">Travel</a></span>
                    </div>
                </div>
            </div>
            <div class="col-3">
                <div class="card h-100">
                    <div class="card-img-top ratio ratio-16x9">
                        <img class="img img-fluid object-fit-cover" src="/website_blog/static/src/img/blog_previews/blog_2.jpg"/>
                    </div>
                    <div class="card-body">
                        <h5 class="mb-2 mt-0">How to choose the right hotel</h5>
                        <small class="text-muted">Mar 13, 2025</small>
                        <p>So you're going abroad, you've chosen your destination and now you have to choose a hotel. Ten years ago, you'd have...</p>
                    </div>
                    <div class="card-footer d-flex justify-content-between mt-auto border-0 p-3 pt-0 bg-transparent small">
                        <span><i class="fa fa-user-circle-o me-2" role="presentation"/> Marc Demo</span>
                        <span class="text-muted">In <a href="#">Travel</a></span>
                    </div>
                </div>
            </div>
            <div class="col-3">
                <div class="card h-100">
                    <div class="card-img-top ratio ratio-16x9">
                        <img class="img img-fluid object-fit-cover" src="/website_blog/static/src/img/blog_previews/blog_3.jpg"/>
                    </div>
                    <div class="card-body">
                        <h5 class="mb-2 mt-0">Maui helicopter tours</h5>
                        <small class="text-muted">Mar 13, 2025</small>
                        <p>Maui helicopter tours are a great way to see the island from a different perspective and have a fun adventure...</p>
                    </div>
                    <div class="card-footer d-flex justify-content-between mt-auto border-0 p-3 pt-0 bg-transparent small">
                        <span><i class="fa fa-user-circle-o me-2" role="presentation"/> Marc Demo</span>
                        <span class="text-muted">In <a href="#">Travel</a></span>
                    </div>
                </div>
            </div>
            <div class="col-3">
                <div class="card h-100">
                    <div class="card-img-top ratio ratio-16x9">
                        <img class="img img-fluid object-fit-cover" src="/website_blog/static/src/img/cover_6.jpg"/>
                    </div>
                    <div class="card-body">
                        <h5 class="mb-2 mt-0">Buying A Telescope</h5>
                        <small class="text-muted">Mar 13, 2025</small>
                        <p>Buying the right telescope to take your love of astronomy to the next level is a big next step in the development...</p>
                    </div>
                    <div class="card-footer d-flex justify-content-between mt-auto border-0 p-3 pt-0 bg-transparent small">
                        <span><i class="fa fa-user-circle-o me-2" role="presentation"/> Marc Demo</span>
                        <span class="text-muted">In <a href="#">Astronomy</a></span>
                    </div>
                </div>
            </div>
        </div>
    </template>
    <template id="s_dynamic_snippet_blog_posts_horizontal_preview_data" name="Blogs Preview Data">
        <div class="s_dialog_preview">
            <div t-attf-class="pb-4 border-bottom">
                <div class="row">
                    <div class="col-3">
                        <div class="rounded overflow-hidden ratio ratio-16x9">
                            <img class="img img-fluid object-fit-cover" src="/website_blog/static/src/img/blog_previews/blog_1.jpg"/>
                        </div>
                    </div>
                    <div class="col-9 d-flex flex-column justify-content-between">
                        <div>
                            <h4 class="mb-2 mt-0">Sierra Tarahumara</h4>
                            <span class="text-muted">Mar 13, 2025</span>
                            <p class="mt-1 mb-0 lead">An exciting mix of relaxation, culture, history, wildlife and hiking.</p>
                        </div>
                        <div class="d-flex justify-content-between small">
                            <span><i class="fa fa-user-circle-o me-2" role="presentation"/> Marc Demo</span>
                            <span class="text-muted">In <a href="#">Travel</a></span>
                        </div>
                    </div>
                </div>
            </div>
            <div t-attf-class="py-4 border-bottom">
                <div class="row">
                    <div class="col-3">
                        <div class="rounded overflow-hidden ratio ratio-16x9">
                            <img class="img img-fluid object-fit-cover" src="/website_blog/static/src/img/blog_previews/blog_2.jpg"/>
                        </div>
                    </div>
                    <div class="col-9 d-flex flex-column justify-content-between">
                        <div>
                            <h4 class="mb-2 mt-0">How to choose the right hotel</h4>
                            <span class="text-muted">Mar 13, 2025</span>
                            <p class="mt-1 mb-0 lead">Facts you should bear in mind.</p>
                        </div>
                        <div class="d-flex justify-content-between small">
                            <span><i class="fa fa-user-circle-o me-2" role="presentation"/> Marc Demo</span>
                            <span class="text-muted">In <a href="#">Travel</a></span>
                        </div>
                    </div>
                </div>
            </div>
            <div t-attf-class="pt-4">
                <div class="row">
                    <div class="col-3">
                        <div class="rounded overflow-hidden ratio ratio-16x9">
                            <img class="img img-fluid object-fit-cover" src="/website_blog/static/src/img/blog_previews/blog_3.jpg"/>
                        </div>
                    </div>
                    <div class="col-9 d-flex flex-column justify-content-between">
                        <div>
                            <h4 class="mb-2 mt-0">Maui helicopter tours</h4>
                            <span class="text-muted">Mar 13, 2025</span>
                            <p class="mt-1 mb-0 lead">A great way to discover hidden places</p>
                        </div>
                        <div class="d-flex justify-content-between small">
                            <span><i class="fa fa-user-circle-o me-2" role="presentation"/> Marc Demo</span>
                            <span class="text-muted">In <a href="#">Travel</a></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>
    <template id="s_dynamic_snippet_blog_posts_list_preview_data" name="Blogs Preview Data">
        <div class="s_dialog_preview row row-cols-3 g-4">
            <div class="col">
                <div class="d-flex align-items-center small">
                    <span><i class="fa fa-user-circle-o me-2" role="presentation"/>Marc Demo</span>
                    <span class="text-muted"> • Mar 13, 2025</span>
                </div>
                <h4 class="mt-2">Sierra Tarahumara</h4>
                <p>Sierra Tarahumara, popularly known as Copper Canyon is situated in Mexico. The area is a favorite destination among those seeking an adventurous vacation. Copper Canyon is one of the six gorges...</p>
            </div>
            <div class="col">
                <div class="d-flex align-items-center small">
                    <span><i class="fa fa-user-circle-o me-2" role="presentation"/>Marc Demo</span>
                    <span class="text-muted"> • Mar 13, 2025</span>
                </div>
                <h4 class="mt-2">How to choose the right hotel</h4>
                <p>So you're going abroad, you've chosen your destination and now you have to choose a hotel. Ten years ago, you'd have probably visited your local travel agent and trusted the face-to-face advice...</p>
            </div>
            <div class="col">
                <div class="d-flex align-items-center small">
                    <span><i class="fa fa-user-circle-o me-2" role="presentation"/>Marc Demo</span>
                    <span class="text-muted"> • Mar 13, 2025</span>
                </div>
                <h4 class="mt-2">Maui helicopter tours</h4>
                <p>Maui helicopter tours are a great way to see the island from a different perspective and have a fun adventure. If you have never been on a helicopter before, this is a great place to do it.</p>
            </div>
            <div class="col">
                <div class="d-flex align-items-center small">
                    <span><i class="fa fa-user-circle-o me-2" role="presentation"/>Marc Demo</span>
                    <span class="text-muted"> • Mar 13, 2025</span>
                </div>
                <h4 class="mt-2">Buying A Telescope</h4>
                <p>Buying the right telescope to take your love of astronomy to the next level is a big next step in the development of your passion for the stars. In many ways, it is a big step from someone...</p>
            </div>
            <div class="col">
                <div class="d-flex align-items-center small">
                    <span><i class="fa fa-user-circle-o me-2" role="presentation"/>Marc Demo</span>
                    <span class="text-muted"> • Mar 13, 2025</span>
                </div>
                <h4 class="mt-2">How To Look Up</h4>
                <p>It is safe to say that at some point on our lives, each and every one of us has that moment when we are suddenly stunned when we come face to face with the enormity of the universe that we...</p>
            </div>
            <div class="col">
                <div class="d-flex align-items-center small">
                    <span><i class="fa fa-user-circle-o me-2" role="presentation"/>Marc Demo</span>
                    <span class="text-muted"> • Mar 13, 2025</span>
                </div>
                <h4 class="mt-2">Beyond The Eye</h4>
                <p>For many of us, our very first experience of learning about the celestial bodies begins when we saw our first full moon in the sky. It is truly a magnificent view even to the naked eye....</p>
            </div>
        </div>
    </template>

    <!-- Single record preview -->
    <template id="s_dynamic_snippet_blog_posts_single_full_preview_data" name="Single Blog Preview Data">
        <div class="s_dialog_preview">
            <h2 class="display-3-fs">How to choose the right hotel</h2>
            <span class="d-block my-3 text-muted"><i class="fa fa-user-circle-o me-2" role="presentation"/><span>Marc Demo</span> • <span>Mar 13, 2025</span> • <a href="#">Travel</a></span>
            <p class="lead h4-fs">So you're going abroad, you've chosen your destination and now you have to choose a hotel. Ten years ago, you'd have probably visited your local travel agent and trusted the face-to-face advice you we...</p>
        </div>
    </template>
    <template id="s_dynamic_snippet_blog_posts_single_aside_preview_data" name="Single Blog Preview Data">
        <div class="s_dialog_preview row my-4">
            <div class="col-lg-7 pe-5 align-content-center">
                <h2>Sierra Tarahumara</h2>
                <span class="d-block my-2 text-muted"><i class="fa fa-user-circle-o me-2" role="presentation"/><span>Marc Demo</span> • <span>Mar 13, 2025</span> • <a href="#">Travel</a></span>
                <p class="lead">Sierra Tarahumara, popularly known as Copper Canyon is situated in Mexico. The area is a favorite destination among those seeking an adventurous vacation. Copper Canyon is one of the six gorges in the...</p>
                <a class="btn btn-primary" href="#">Read Now <i class="fa fa-long-arrow-right ms-2" role="presentation"/></a>
            </div>
            <div class="col-lg-5">
                <div class="ratio ratio-16x9">
                    <div class="rounded" style="background-image: url('/website_blog/static/src/img/blog_previews/blog_1.jpg'); background-size: cover;"></div>
                </div>
            </div>
        </div>
    </template>
    <template id="s_dynamic_snippet_blog_posts_single_circle_preview_data" name="Single Blog Preview Data">
        <div class="s_dialog_preview row my-4">
            <div class="col-4">
                <div class="rounded-circle overflow-hidden ratio ratio-1x1" style="background-image: url('/website_blog/static/src/img/blog_previews/blog_2.jpg'); background-size: cover;"/>
            </div>
            <div class="col-8">
                <h2>How to choose the right hotel</h2>
                <div class="mb-2">
                    <span class="text-muted"><i class="fa fa-user-circle-o me-2" role="presentation"/><span>Marc Demo</span> • <span>Mar 13, 2025</span> • <a href="#">Travel</a></span>
                </div>
                <p class="lead">Facts you should bear in mind.</p>
                <a class="btn btn-primary" href="#">Read Now <i class="fa fa-long-arrow-right" role="presentation"/></a>
            </div>
        </div>
    </template>
    <template id="s_dynamic_snippet_blog_posts_single_badge_preview_data" name="Single Blog Preview Data">
        <div class="s_dialog_preview my-4">
            <div class="text-center">
                <span class="o_cc o_cc1 d-inline-flex align-items-center justify-content-center gap-3 border rounded py-2 px-3 rounded-pill">
                    <span class="badge text-bg-primary">NEW</span>
                    <strong>Sierra Tarahumara</strong>
                    <span class="text-muted">Marc Demo in Travel</span>
                    <span class="text-primary">Read Now <i class="fa fa-long-arrow-right" role="presentation"/></span>
                </span>
            </div>
        </div>
    </template>
</odoo>
