<odoo>
<template id="s_three_columns" name="Columns">
    <section class="s_three_columns o_mail_snippet_general o_cc pt32 pb32" data-vxml="001">
        <div class="container">
            <div class="row">
                <div class="col-md-4 o_mail_no_colorpicker pt16 pb16 col-12">
                    <div class="card text-bg-white h-100">
                        <div class="o_not_editable">
                            <img class="card-img-top o_editable_media" src="/web/image/mass_mailing.s_three_columns_default_image_1" alt=""/>
                        </div>
                        <div class="card-body">
                            <h3 class="card-title" style="font-size: 18px;">Feature One</h3>
                            <p class="card-text">Adapt these three columns to fit your design need. To duplicate, delete or move columns, select the column and use the top icons to perform your action.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 o_mail_no_colorpicker pt16 pb16 col-12">
                    <div class="card text-bg-white h-100">
                        <div class="o_not_editable">
                            <img class="card-img-top o_editable_media" src="/web/image/mass_mailing.s_three_columns_default_image_2" alt=""/>
                        </div>
                        <div class="card-body">
                            <h3 class="card-title" style="font-size: 18px;">Feature Two</h3>
                            <p class="card-text">To add a fourth column, reduce the size of these three columns using the right icon of each block. Then, duplicate one of the columns to create a new one as a copy.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 o_mail_no_colorpicker pt16 pb16 col-12">
                    <div class="card text-bg-white h-100">
                        <div class="o_not_editable">
                            <img class="card-img-top o_editable_media" src="/web/image/mass_mailing.s_three_columns_default_image_3" alt=""/>
                        </div>
                        <div class="card-body">
                            <h3 class="card-title" style="font-size: 18px;">Feature Three</h3>
                            <p class="card-text">Delete the above image or replace it with a picture that illustrates your message. Click on the picture to change its <em>rounded corner</em> style.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<template name="Big Boxes" id="s_color_blocks_2">
    <section class="s_mail_color_blocks_2 o_mail_snippet_general" data-vxml="001">
        <div class="container mx-auto my-auto">
            <div class="row">
                <div class="col-md-6 o_cc o_cc4 pb24 pt24 col-12">
                    <h2 style="text-align: center;"><font style="color:white;"><span class="h3-fs">A color block</span></font></h2>
                    <p style="text-align: center;"><font style="color:white;">Color blocks are a simple and effective way to <strong>present and highlight your content</strong>. Choose an image or a color for the background. You can even resize and duplicate the blocks to create your own layout. Add images or icons to customize the blocks.</font></p>
                    <p style="text-align: center;"><a href="#" class="btn btn-dark"><font style="color:white;">More Details</font></a></p>
                </div>
                <div class="col-md-6 o_cc o_cc5 pb24 pt24 col-12">
                    <h2 style="text-align: center;"><font style="color:white;"><span class="h3-fs">Another color block</span></font></h2>
                    <p style="text-align: center;"><font style="color:white;">Color blocks are a simple and effective way to <strong>present and highlight your content</strong>. Choose an image or a color for the background. You can even resize and duplicate the blocks to create your own layout. Add images or icons to customize the blocks.</font></p>
                    <p style="text-align: center"><a href="#" class="btn btn-secondary"><font style="color:white;">More Details</font></a></p>
                </div>
            </div>
        </div>
    </section>
</template>

<template name="Media List" id="s_media_list">
    <section class="s_media_list pt32 pb32 o_colored_level o_cc o_mail_snippet_general" data-vcss="001" data-vxml="001">
        <div class="container">
            <div class="row s_nb_column_fixed">
                <div class="col-md-12 s_media_list_item pt16 pb16 col-12" data-name="Media item">
                    <div class="row s_col_no_resize o_mail_no_colorpicker g-0 align-items-center o_colored_level o_cc">
                        <div class="col-md-4 align-self-stretch s_media_list_img_wrapper o_not_editable col-12">
                            <img src="/web/image/mass_mailing.s_media_list_default_image_1" class="s_media_list_img img-fluid o_editable_media" alt=""/>
                        </div>
                        <div class="col-md-8 s_media_list_body ps-md-4 col-12 o_cc">
                            <h2>Media heading</h2>
                            <p>Use this snippet to build various types of components that feature a left- or right-aligned image alongside textual content. Duplicate the element to create a list that fits your needs.
                            <br/><a href="#">Discover more <span class="fa fa-long-arrow-right align-middle ms-1"/></a></p>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 s_media_list_item pt16 pb16" data-name="Media item">
                    <div class="row s_col_no_resize o_mail_no_colorpicker g-0 align-items-center o_colored_level o_cc">
                        <div class="col-md-4 align-self-stretch s_media_list_img_wrapper o_not_editable  col-12">
                            <img src="/web/image/mass_mailing.s_media_list_default_image_2" class="s_media_list_img o_editable_media img-fluid" alt=""/>
                        </div>
                        <div class="col-md-8 s_media_list_body ps-md-4 col-12 o_cc">
                            <h2>Event heading</h2>
                            <p>Speakers from all over the world will join our experts to give inspiring talks on various topics. Stay on top of the latest business management trends &amp; technologies</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 s_media_list_item pt16 pb16" data-name="Media item">
                    <div class="row s_col_no_resize o_mail_no_colorpicker g-0 align-items-center o_colored_level o_cc">
                        <div class="col-md-4 align-self-stretch s_media_list_img_wrapper o_not_editable">
                            <img src="/web/image/mass_mailing.s_media_list_default_image_3" class="s_media_list_img o_editable_media img-fluid" alt=""/>
                        </div>
                        <div class="col-md-8 s_media_list_body ps-md-4 col-12 o_cc">
                            <h2>Post heading</h2>
                            <p>Use this component for creating a list of featured elements to which you want to bring attention.</p>
                            <p><a href="#">Continue reading <span class="fa fa-long-arrow-right align-middle ms-1"/></a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<template id="s_attributes_horizontal" name="Horizontal Attributes">
    <section class="s_attributes_horizontal pt24 pb24 o_mail_snippet_general" data-vxml="001">
        <div class="container">
            <div class="row">
                <div class="s_attributes_horizontal_col col-md-4 pt24 pb24 col-12" data-name="Column">
                    <div class="row align-items-center h-100 mx-0 s_col_no_resize o_mail_no_colorpicker">
                        <div class="col-2 col-md-3 px-0">
                            <div class="o_not_editable">
                                <img
                                    src="/html_editor/shape/mass_mailing/s_attributes_1.svg?c1=rgba(0,0,0,.25)&amp;c4=o-color-4&amp;c5=o-color-5"
                                    data-original-src="/mass_mailing/static/shapes/s_attributes_1.svg"
                                    class="s_attributes_horizontal_img img img-fluid o_editable_media"
                                    alt=""
                                    style="width: 100% !important;"
                                    />
                            </div>
                        </div>
                        <div class="col-10 col-md-9 pe-0">
                            <p><strong>Easy returns</strong></p>
                        </div>
                    </div>
                </div>
                <div class="s_attributes_horizontal_col col-md-4 pt24 pb24 col-12" data-name="Column">
                    <div class="row align-items-center h-100 mx-0 s_col_no_resize o_mail_no_colorpicker">
                        <div class="col-2 col-md-3 px-0">
                            <div class="o_not_editable">
                                <img
                                    src="/html_editor/shape/mass_mailing/s_attributes_2.svg?c1=rgba(0,0,0,.25)&amp;c2=rgba(0,0,0,.5)&amp;c4=o-color-4&amp;c5=o-color-5"
                                    data-original-src="/mass_mailing/static/shapes/s_attributes_2.svg"
                                    class="s_attributes_horizontal_img img img-fluid o_editable_media"
                                    alt=""
                                    style="width: 100% !important;"
                                    />
                            </div>
                        </div>
                        <div class="col-10 col-md-9 pe-0">
                            <p><strong>Free shipping</strong></p>
                        </div>
                    </div>
                </div>
                <div class="s_attributes_horizontal_col col-md-4 pt24 pb24 col-12" data-name="Column">
                    <div class="row align-items-center h-100 mx-0 s_col_no_resize o_mail_no_colorpicker">
                        <div class="col-2 col-md-3 px-0">
                            <div class="o_not_editable">
                                <img
                                    src="/html_editor/shape/mass_mailing/s_attributes_3.svg?c1=rgba(0,0,0,.25)&amp;c4=o-color-4&amp;c5=o-color-5"
                                    data-original-src="/mass_mailing/static/shapes/s_attributes_3.svg"
                                    class="s_attributes_horizontal_img img img-fluid o_editable_media"
                                    alt=""
                                    style="width: 100% !important;"
                                    />
                            </div>
                        </div>
                        <div class="col-10 col-md-9 pe-0">
                            <p><strong>Secure payment</strong></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<template id="s_numbers" name="Numbers">
    <section class="s_numbers o_mail_snippet_general o_cc" data-vxml="001">
        <div class="container">
            <div class="row">
                <div class="col-md-4 pt24 pb24 o_cc col-12" style="text-align: center;">
                    <p><strong><font style="font-size: 48px;">12</font></strong></p>
                    <p>Useful options</p>
                </div>
                <div class="col-md-4 pt24 pb24 o_cc o_cc4 col-12" style="text-align: center;">
                    <p><strong><font style="font-size: 48px; color: white;">45</font></strong></p>
                    <p><font style="color: white;">Beautiful snippets</font></p>
                </div>
                <div class="col-md-4 pt24 pb24 o_cc col-12" style="text-align: center;">
                    <p><strong><font style="font-size: 48px;">8</font></strong></p>
                    <p>Amazing pages</p>
                </div>
            </div>
        </div>
    </section>
</template>

<template id="s_event" name="Event">
    <section class="s_mail_block_event o_mail_snippet_general" data-vxml="001">
        <div class="container">
            <div class="row align-items-center">
                <div class="o_mail_no_colorpicker col-md-6 pt32 pb32 col-12">
                    <div class="card bg-white h-100 rounded" style="border-radius: 5px !important; border-color: rgb(233, 236, 239) !important;">
                        <div class="o_not_editable">
                            <img class="card-img-top o_editable_media" src="/web/image/mass_mailing.s_event_default_image_1" alt=""/>
                        </div>
                        <div class="card-body">
                            <h3 class="card-title">
                                <span style="font-size: 18px;">Event One</span>
                            </h3>
                            <p><font class="text-o-color-1">25 September 2022 - 4:30 PM</font></p>
                            <p>London, United Kingdom</p>
                            <p>
                                <a href="#" target="_blank" class="btn btn-primary">Register Now</a>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="o_mail_no_colorpicker col-md-6 pt32 pb32 col-12">
                    <div class="card bg-white h-100 rounded" style="border-radius: 5px !important; border-color: rgb(233, 236, 239) !important;">
                        <div class="o_not_editable">
                            <img class="card-img-top o_editable_media" src="/web/image/mass_mailing.s_event_default_image_2" alt=""/>
                        </div>
                        <div class="card-body">
                            <h3 class="card-title">
                                <span style="font-size: 18px">Event Two</span>
                            </h3>
                            <p><font class="text-o-color-1">26 September 2022 - 1:30 PM</font></p>
                            <p>London, United Kingdom</p>
                            <p>
                                <a href="#" target="_blank" class="btn btn-primary">Register Now</a>
                            </p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
</template>

<template id="s_product_list" name="Items">
    <section class="s_mail_product_list o_mail_snippet_general" data-vxml="001">
        <div class="container pt16">
            <div class="ps-3">
                <h2><span class="h3-fs">Our finest selection</span></h2>
            </div>
            <div class="row">
                <div class="col-md-4 o_cc pt16 pb16 col-12">
                    <div class="o_not_editable mb-3">
                        <a href="">
                            <img src="/web/image/mass_mailing.s_product_list_default_image_1" alt="" class="img img-fluid o_editable_media mx-auto"/>
                        </a>
                    </div>
                    <h3 class="card-title" style="text-align: center;"><a href="#"><span class="h5-fs">Elegant</span></a></h3>
                </div>
                <div class="col-md-4 o_cc pt16 pb16 col-12">
                    <div class="o_not_editable mb-3">
                        <a href="">
                            <img src="/web/image/mass_mailing.s_product_list_default_image_2" alt="" class="img img-fluid o_editable_media mx-auto"/>
                        </a>
                    </div>
                    <h3 class="card-title" style="text-align: center;"><a href="#"><span class="h5-fs">Simple</span></a></h3>
                </div>
                <div class="col-md-4 o_cc pt16 pb16 col-12">
                    <div class="o_not_editable mb-3">
                        <a href="">
                            <img src="/web/image/mass_mailing.s_product_list_default_image_3" alt="" class="img img-fluid o_editable_media mx-auto"/>
                        </a>
                    </div>
                    <h3 class="card-title" style="text-align: center;"><a href="#"><span class="h5-fs">Balanced</span></a></h3>
                </div>
            </div>
        </div>
    </section>
</template>

<template id="s_features_grid" name="Features Grid">
    <section class="s_mail_features_grid o_mail_snippet_general pt48 pb24" data-vxml="001">
        <div class="container">
            <div class="row">
                <div class="col-md-6 o_cc col-12">
                    <div class="container">
                        <div class="row g-0">
                            <div class="col-md-12 pb24 col-12">
                                <h2>First list of Features</h2>
                                <p>Add a great slogan.</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="ps-0 col-md-2 col-12 o_not_editable" style="text-align: center;">
                                <span class="fa fa-2x fa-font-awesome bg-primary o_editable_media" style="padding: 10px; border-radius: 50px !important;"></span>
                            </div>
                            <div class="col-md-10 pb16 px-0 col-12">
                                <h3>Change Icons</h3>
                                <p>Double click an icon to replace it with one of your choice.</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="ps-0 col-md-2 col-12 o_not_editable" style="text-align: center;">
                                <span class="fa fa-2x fa-files-o bg-primary o_editable_media" style="padding: 10px; border-radius: 50px !important;"></span>
                            </div>
                            <div class="col-md-10 pb16 px-0 col-12">
                                <h3>Duplicate</h3>
                                <p>Duplicate blocks and columns to add more features.</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="ps-0 col-md-2 col-12 o_not_editable" style="text-align: center;">
                                <span class="fa fa-2x fa-trash bg-primary o_editable_media" style="padding: 10px; border-radius: 50px !important;"></span>
                            </div>
                            <div class="col-md-10 pb16 px-0 col-12">
                                <h3>Delete Blocks</h3>
                                <p>Select and delete blocks to remove features.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 o_cc">
                    <div class="container">
                        <div class="row g-0">
                            <div class="col-md-12 pb24 col-12">
                                <h2>Second list of Features</h2>
                                <p>Add a great slogan.</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="ps-0 col-md-2 col-12 o_not_editable" style="text-align: center;">
                                <span class="fa fa-2x fa-magic bg-secondary o_editable_media" style="padding: 10px; border-radius: 3px !important; color: white;"></span>
                            </div>
                            <div class="col-md-10 pb16 px-0 col-12">
                                <h3>Great Value</h3>
                                <p>Turn every feature into a benefit for your reader.</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="ps-0 col-md-2 col-12 o_not_editable" style="text-align: center;">
                                <span class="fa fa-2x fa-eyedropper bg-secondary o_editable_media" style="padding: 10px; border-radius: 3px !important; color: white;"></span>
                            </div>
                            <div class="col-md-10 pb16 px-0 col-12">
                                <h3>Edit Styles</h3>
                                <p>You can edit colors and backgrounds to highlight features.</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="ps-0 col-md-2 col-12 o_not_editable" style="text-align: center;">
                                <span class="fa fa-2x fa-picture-o bg-secondary o_editable_media" style="padding: 10px; border-radius: 3px !important; color: white;"></span>
                            </div>
                            <div class="col-md-10 pb16 px-0 col-12">
                                <h3>Sample Icons</h3>
                                <p>All these icons are completely free for commercial use.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<template id="s_features_showcase" name="Feature Showcase with Image">
    <section class="o_mail_snippet_general s_text_image" data-vxml="001">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-12 pt16 pb16">
                    <h1>Features showcase</h1>
                    <p>A features section highlights your product's key attributes, engaging visitors and boosting conversions.</p>
                    <div class="row">
                        <div class="col-md-2 col-2">
                            <span class="fa fa-star-o bg-light rounded p-3" contenteditable="false"/>
                        </div>
                        <div class="col-md-10 col-10">
                            <h3>Highlights Key Attributes</h3>
                            <p>A feature section allows you to clearly showcase the main benefits and unique aspects of your product.</p>
                        </div>
                        <div class="col-md-2 col-2">
                            <span class="fa fa-user-o bg-light rounded p-3" contenteditable="false"/>
                        </div>
                        <div class="col-md-10 col-10">
                            <h3>Engages Visitors</h3>
                            <p>It captures your visitors' attention and helps them quickly understand the value of your product.</p>
                        </div>
                        <div class="col-md-2 col-2">
                            <span class="fa fa-heart-o bg-light rounded p-3" contenteditable="false"/>
                        </div>
                        <div class="col-md-10 col-10">
                            <h3>Boosts Conversions</h3>
                            <p>Organizing and presenting key information effectively increases the likelihood of turning your visitors into customers.</p>
                        </div>
                    </div>
                    <t t-call="mass_mailing.s_hr"/>
                    <a href="#" class="btn btn-primary">Discover all features</a>
                </div>
                <div class="col-md-6 col-12 pt16 pb16">
                    <div class="o_not_editable">
                        <img class="img img-fluid o_editable_media"
                            src="/mass_mailing/static/src/img/snippets_demo/s_showcase.jpg"
                            data-original-src="/mass_mailing/static/src/img/snippets_demo/s_showcase.jpg"
                            data-original-mimetype="image/jpeg"
                            data-mimetype="image/jpeg"/>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<template id="s_membership_advertisement" name="Membership Advertisement">
    <section class="o_mail_snippet_general s_text_image" data-vxml="001">
        <div class="container">
            <div class="row">
                <div class="col-md-2 col-4 pt16 pb16">
                    <div class="o_not_editable">
                        <img class="img img-fluid mx-auto o_editable_media"
                            src="/mass_mailing/static/shapes/s_attributes_4.svg"
                            data-original-src="/mass_mailing/static/shapes/s_attributes_4.svg"
                            data-original-mimetype="image/svg+xml"
                            data-mimetype="image/svg+xml"/>
                    </div>
                </div>
                <div class="col-md-4 col-8 pt16 pb16">
                    <h2>Award-winning collection</h2>
                    <p>Each piece is more than just furniture; it's a recognized masterpiece of craftsmanship and style.</p>
                    <a href="#">Learn More</a>
                </div>
                <div class="col-md-2 col-4 pt16 pb16">
                    <div class="o_not_editable">
                        <img class="img img-fluid mx-auto o_editable_media"
                            src="/mass_mailing/static/shapes/s_attributes_5.svg"
                            data-original-src="/mass_mailing/static/shapes/s_attributes_5.svg"
                            data-original-mimetype="image/svg+xml"
                            data-mimetype="image/svg+xml"/>
                    </div>
                </div>
                <div class="col-md-4 col-8 pt16 pb16">
                    <h2>Become a Member</h2>
                    <p>Join our inner circle to enjoy exclusive privileges and turn every curated choice into a journey of refined inspiration.</p>
                    <a href="#">Learn More</a>
                </div>
            </div>
        </div>
    </section>
</template>

<template id="s_features_column" name="Features Column">
    <section class="o_mail_snippet_general pt16 pb16" data-vxml="001">
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-12">
                    <span class="fa fa-envelope bg-light rounded p-3 mb-3" contenteditable="false"/>
                    <h2>Reliability</h2>
                    <p>Consistent performance and uptime ensure efficient, reliable service with minimal interruptions and quick response times.</p>
                </div>
                <div class="col-md-4 col-12">
                    <span class="fa fa-credit-card bg-light rounded p-3 mb-3" contenteditable="false"/>
                    <h2>Performance</h2>
                    <p>Speed and efficiency ensure tasks are completed quickly and resources are used optimally, enhancing productivity and satisfaction.</p>
                </div>
                <div class="col-md-4 col-12">
                    <span class="fa fa-flag bg-light rounded p-3 mb-3" contenteditable="false"/>
                    <h2>Scalability</h2>
                    <p>Growth capability is a system's ability to scale and adapt, meeting increasing demands and evolving needs for long-term success.</p>
                </div>
            </div>
        </div>
    </section>
</template>

<record id="mass_mailing.s_features_grid_000_scss" model="ir.asset">
    <field name="name">Features grid 000 SCSS</field>
    <field name="bundle">mass_mailing.assets_iframe_style</field>
    <field name="path">mass_mailing/static/src/snippets/s_features_grid/000.scss</field>
</record>
</odoo>
