<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <!-- Multi record preview -->
    <template id="s_event_upcoming_snippet_preview_data" name="Events Picture Preview Data">
        <div class="s_dialog_preview row">
            <div class="col-12 col-sm-6 col-lg-4">
                <div class="s_events_event w-100">
                    <a class="s_events_event_cover position-relative d-flex align-items-center rounded overflow-hidden text-decoration-none ratio ratio-1x1" href="#">
                        <div class="o_record_cover_container d-flex flex-column o_colored_level o_cc h-100 w-100 bg-600 position-absolute">
                            <div class="o_record_cover_component o_record_cover_image " style="background-image: url('/website_event/static/src/img/event_previews/event_1.jpg');"/>
                            <div class="o_record_cover_component o_record_cover_filter oe_black" style="opacity: 0.4;"/>
                        </div>
                        <div class="text-center w-100 h-100 px-3 d-flex flex-column justify-content-center flex-grow-1">
                            <h3 class="text-white">Innovations in Technology and Society</h3>
                            <time class="text-white" datetime="2024-08-05 07:00:00">
                                <span>July 26, 2024</span>
                                <span class="s_events_event_time">
                                    - <span>9:00 AM</span>
                                    (Europe/Brussels)
                                </span>
                            </time>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-lg-4">
                <div class="s_events_event w-100">
                    <a class="s_events_event_cover position-relative d-flex align-items-center rounded overflow-hidden text-decoration-none ratio ratio-1x1" href="#">
                        <div class="o_record_cover_container d-flex flex-column o_colored_level o_cc h-100 w-100 bg-600 position-absolute">
                            <div class="o_record_cover_component o_record_cover_image " style="background-image: url('/website_event/static/src/img/event_previews/event_2.jpg');"/>
                            <div class="o_record_cover_component o_record_cover_filter oe_black" style="opacity: 0.4;"/>
                        </div>
                        <div class="text-center w-100 h-100 px-3 d-flex flex-column justify-content-center flex-grow-1">
                            <h3 class="text-white">Excellence in Achievement Awards</h3>
                            <time class="text-white" datetime="2024-08-10 08:00:00">
                                <span>October 24, 2024</span>
                                <span class="s_events_event_time">
                                    - <span>1:15 AM</span>
                                    (Europe/Brussels)
                                </span>
                            </time>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-lg-4">
                <div class="s_events_event w-100">
                    <a class="s_events_event_cover position-relative d-flex align-items-center rounded overflow-hidden text-decoration-none ratio ratio-1x1" href="#">
                        <div class="o_record_cover_container d-flex flex-column o_colored_level o_cc h-100 w-100 bg-600 position-absolute">
                            <div class="o_record_cover_component o_record_cover_image " style="background-image: url('/website_event/static/src/img/event_previews/event_3.jpg');"/>
                            <div class="o_record_cover_component o_record_cover_filter oe_black" style="opacity: 0.4;"/>
                        </div>
                        <div class="text-center w-100 h-100 px-3 d-flex flex-column justify-content-center flex-grow-1">
                            <h3 class="text-white">Harmony Under the Stars</h3>
                            <time class="text-white" datetime="2024-11-08 20:15:00">
                                <span>November 23, 2024</span>
                                <span class="s_events_event_time">
                                    - <span>8:15 PM</span>
                                    (Europe/Brussels)
                                </span>
                            </time>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </template>
    <template id="s_event_upcoming_snippet_card_preview_data" name="Events Card Preview Data">
        <div class="s_dialog_preview row">
            <div class="col-3">
                <div class="card h-100">
                    <div class="card-img-top position-relative">
                        <div class="ratio ratio-16x9">
                            <img class="img img-fluid object-fit-cover" src="/website_event/static/src/img/event_previews/event_1.jpg"/>
                        </div>
                        <div class="position-absolute top-0 end-0 me-3 mt-3 p-3 rounded-circle bg-white shadow-sm text-center text-dark" style="width: 5rem; height: 5rem;">
                            <span class="fw-bold text-uppercase">AUG</span>
                            <span class="fw-light lh-1">23</span>
                        </div>
                    </div>
                    <div class="card-body">
                        <strong>8:15 PM</strong>
                        <h5 class="mb-2 mt-0">Innovations in Technology and Society</h5>
                        <p class="text-muted">Shaping tomorrow through ideas that transform how we live today.</p>
                    </div>
                    <div class="card-footer mt-auto border-0 p-3 pt-0 bg-transparent">
                        <strong>Los Angeles, CA, United States</strong>
                    </div>
                </div>
            </div>
            <div class="col-3">
                <div class="card h-100">
                    <div class="card-img-top position-relative">
                        <div class="ratio ratio-16x9">
                            <img class="img img-fluid object-fit-cover" src="/website_event/static/src/img/event_previews/event_2.jpg"/>
                        </div>
                        <div class="position-absolute top-0 end-0 me-3 mt-3 p-3 rounded-circle bg-white shadow-sm text-center text-dark" style="width: 5rem; height: 5rem;">
                            <span class="fw-bold text-uppercase">AUG</span>
                            <span class="fw-light lh-1">23</span>
                        </div>
                    </div>
                    <div class="card-body">
                        <strong>8:15 PM</strong>
                        <h5 class="mb-2 mt-0">Harmony Under the Stars</h5>
                        <p class="text-muted">Melancholic melodies and textured soundscapes exploring memory and quiet distance.</p>
                    </div>
                    <div class="card-footer mt-auto border-0 p-3 pt-0 bg-transparent">
                        <strong>Los Angeles, CA, United States</strong>
                    </div>
                </div>
            </div>
            <div class="col-3">
                <div class="card h-100">
                    <div class="card-img-top position-relative">
                        <div class="ratio ratio-16x9">
                            <img class="img img-fluid object-fit-cover" src="/website_event/static/src/img/event_previews/event_3.jpg"/>
                        </div>
                        <div class="position-absolute top-0 end-0 me-3 mt-3 p-3 rounded-circle bg-white shadow-sm text-center text-dark" style="width: 5rem; height: 5rem;">
                            <span class="fw-bold text-uppercase">AUG</span>
                            <span class="fw-light lh-1">23</span>
                        </div>
                    </div>
                    <div class="card-body">
                        <strong>8:15 PM</strong>
                        <h5 class="mb-2 mt-0">Excellence in Achievement Awards</h5>
                        <p class="text-muted">Honoring outstanding accomplishments, dedication, and impact across all fields.</p>
                    </div>
                    <div class="card-footer mt-auto border-0 p-3 pt-0 bg-transparent">
                        <strong>Los Angeles, CA, United States</strong>
                    </div>
                </div>
            </div>
            <div class="col-3">
                <div class="card h-100">
                    <div class="card-img-top position-relative">
                        <div class="ratio ratio-16x9">
                            <img class="img img-fluid object-fit-cover" src="/website_event/static/src/img/event_cover_2.jpg"/>
                        </div>
                        <div class="position-absolute top-0 end-0 me-3 mt-3 p-3 rounded-circle bg-white shadow-sm text-center text-dark" style="width: 5rem; height: 5rem;">
                            <span class="fw-bold text-uppercase">AUG</span>
                            <span class="fw-light lh-1">23</span>
                        </div>
                    </div>
                    <div class="card-body">
                        <strong>8:15 PM</strong>
                        <h5 class="mb-2 mt-0">Conference for Architects</h5>
                        <p class="text-muted">Enhance your architectural business and improve professional skills.</p>
                    </div>
                    <div class="card-footer mt-auto border-0 p-3 pt-0 bg-transparent">
                        <strong>Los Angeles, CA, United States</strong>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <!-- Single record preview -->
    <template id="s_dynamic_snippet_events_single_offset_preview_data" name="Single Event Offset Preview Data">
        <div class="s_dialog_preview my-4">
            <div class="w-100 rounded" style="background-image: url('/website_event/static/src/img/event_previews/event_1.jpg'); background-size: cover; background-position: center;">
                <div class="position-absolute w-100 h-100 rounded bg-black-50"/>
                <div class="position-relative p-5 text-white">
                    <div class="py-5">
                        <h2>Innovations in Technology and Society</h2>
                        <p class="lead">Shaping tomorrow through ideas that transform how we live today.</p>
                    </div>
                    <div class="o_cc o_cc5 position-absolute top-100 start-50 w-75 d-flex gap-5 mx-0 px-4 py-3 rounded" style="transform: translate(-50%, -50%);">
                        <div class="me-5">
                            <p class="mb-2 fw-bold">Time</p>
                            <span><i class="fa fa-clock-o me-2" role="presentation"/>8:15 PM</span>
                        </div>
                        <div>
                            <p class="mb-2 fw-bold">Location</p>
                            <span><i class="fa fa-map-marker me-2" role="presentation"/>Los Angeles, CA, United States</span>
                        </div>
                        <div class="d-flex align-items-center justify-content-end ms-auto">
                            <p class="h4-fs mb-0 me-3 pe-3">August 23, 2025</p>
                            <div class="ps-3 border-start">
                                <a href="#" class="btn btn-primary">Register</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>
    <template id="s_dynamic_snippet_events_single_entry_preview_data" name="Single Event Entry Preview Data">
        <div class="s_dialog_preview my-4">
            <div class="w-100 rounded" style="background-image: url('/website_event/static/src/img/event_previews/event_3.jpg'); background-size: cover; background-position: center;">
                <div class="position-absolute w-100 h-100 rounded bg-black-50"/>
                <div class="position-relative d-flex flex-column gap-5 w-100 h-100 p-4 p-lg-5 text-white">
                    <div class="d-flex gap-5">
                        <div class="flex-grow-1">
                            <h2>Harmony Under the Stars</h2>
                            <p class="lead">Melancholic melodies and textured soundscapes exploring memory and quiet distance.</p>
                        </div>
                        <div>
                            <p class="h3-fs text-nowrap">August 23, 2025 at 8:15 PM</p>
                        </div>
                    </div>
                    <div class="d-flex align-items-center gap-5 mt-auto">
                        <div class="flex-grow-1">
                            <a href="#" class="btn btn-lg btn-primary">Register Now</a>
                        </div>
                        <span class="fs-5"><i class="fa fa-map-marker me-2" role="presentation"/>Los Angeles, CA, United States</span>
                    </div>
                </div>
            </div>
        </div>
    </template>
    <template id="s_dynamic_snippet_events_single_card_preview_data" name="Single Event Card Preview Data">
        <div class="s_dialog_preview my-4">
            <div class="w-100 rounded" style="background-image: url('/website_event/static/src/img/event_previews/event_2.jpg'); background-size: cover; background-position: center;">
                <div class="position-absolute w-100 h-100 rounded bg-black-50"/>
                <div class="position-relative d-flex align-items-center justify-content-between flex-wrap w-100 h-100 p-4 p-lg-5">
                    <div class="text-white">
                        <h2>Excellence in Achievement Awards</h2>
                        <p class="lead">Honoring outstanding accomplishments, dedication, and impact across all fields.</p>
                    </div>
                    <div class="card o_cc o_cc1 border-0 shadow">
                        <div class="card-body p-4">
                            <strong>Date</strong>
                            <p><i class="fa fa-calendar me-2" role="presentation"/>August 23, 2025</p>
                            <strong>Time</strong>
                            <p><i class="fa fa-clock-o me-2" role="presentation"/>8:15 PM</p>
                            <strong>Location</strong>
                            <p><i class="fa fa-map-marker me-2" role="presentation"/>Los Los Angeles, CA, United States</p>
                            <a href="#" class="btn btn-primary w-100">Register<i class="fa fa-long-arrow-right ms-2" role="presentation"/></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>
    <template id="s_dynamic_snippet_events_single_badge_preview_data" name="Single Event Badge 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">
                    <i class="fa fa-calendar" role="presentation"/>
                    <strong>Harmony Under the Stars</strong>
                    <span class="text-muted">August 23, 2025 - 8:15 PM</span>
                    <span class="text-primary">Register <i class="fa fa-long-arrow-right" role="presentation"/></span>
                </span>
            </div>
        </div>
    </template>
    <template id="s_dynamic_snippet_events_single_aside_preview_data" name="Single Event Aside Preview Data">
        <div class="s_dialog_preview row my-4">
            <div class="col-lg-6 pe-5 align-content-center">
                <h2>Innovations in Technology and Society</h2>
                <p class="lead">Shaping tomorrow through ideas that transform how we live today.</p>
                <a class="btn btn-primary" href="#">Register <i class="fa fa-long-arrow-right ms-2" role="presentation"/></a>
                <div class="d-flex gap-5 mt-5">
                    <div>
                        <p class="text-muted">Date</p>
                        <span><i class="fa fa-calendar me-2" role="presentation"/>August 23, 2025 at 8:15 PM</span>
                    </div>
                    <div>
                        <p class="text-muted">Location</p>
                        <span><i class="fa fa-map-marker me-2" role="presentation"/>Los Angeles, CA, United States</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="ratio ratio-16x9">
                    <div class="rounded" style="background-image: url('/website_event/static/src/img/event_previews/event_1.jpg'); background-size: cover;"></div>
                </div>
            </div>
        </div>
    </template>
</odoo>
