odoo_source/addons/website/views/snippets/snippets.xml

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

<!-- Snippets menu -->
<template id="snippets" inherit_id="web_editor.snippets" primary="True" groups="base.group_user">
    <xpath expr="//div[@id='snippets_menu']" position="inside">
        <button type="button" tabindex="3" class="o_we_customize_theme_btn text-uppercase"
                data-title="Customize your theme"
                groups="website.group_website_designer" accesskey="2">
            <span>Options</span>
        </button>
    </xpath>
    <xpath expr="//t[@id='default_snippets']" position="replace">
        <t id="default_snippets">
            <div id="snippet_mega_menu" class="o_panel d-none">
                <div class="o_panel_header">Mega Menu</div>
                <div class="o_panel_body">
                    <t t-snippet="website.s_mega_menu_multi_menus" t-thumbnail="/website/static/src/img/snippets_thumbs/s_mega_menu_multi_menus.svg"/>
                    <t t-snippet="website.s_mega_menu_menu_image_menu" t-thumbnail="/website/static/src/img/snippets_thumbs/s_mega_menu_menu_image_menu.svg"/>
                </div>
            </div>

            <div id="snippet_structure" class="o_panel">
                <div class="o_panel_header">Structure</div>
                <div class="o_panel_body">
                    <t t-snippet="website.s_banner" t-thumbnail="/website/static/src/img/snippets_thumbs/s_banner.svg">
                        <keywords>hero, jumbotron</keywords>
                    </t>
                    <t t-snippet="website.s_cover" t-thumbnail="/website/static/src/img/snippets_thumbs/s_cover.svg">
                        <keywords>hero, jumbotron</keywords>
                    </t>
                    <t t-snippet="website.s_text_image" t-thumbnail="/website/static/src/img/snippets_thumbs/s_text_image.svg">
                        <keywords>content</keywords>
                    </t>
                    <t t-snippet="website.s_image_text" t-thumbnail="/website/static/src/img/snippets_thumbs/s_image_text.svg">
                        <keywords>content</keywords>
                    </t>
                    <t t-snippet="website.s_title" t-thumbnail="/website/static/src/img/snippets_thumbs/s_title.svg">
                        <keywords>heading, h1</keywords>
                    </t>
                    <t t-snippet="website.s_text_block" t-thumbnail="/website/static/src/img/snippets_thumbs/s_text_block.svg">
                        <keywords>content</keywords>
                    </t>
                    <t t-snippet="website.s_numbers" t-thumbnail="/website/static/src/img/snippets_thumbs/s_numbers.svg">
                        <keywords>statistics, stats, KPI</keywords>
                    </t>
                    <t t-snippet="website.s_picture" t-thumbnail="/website/static/src/img/snippets_thumbs/s_picture.svg">
                        <keywords>image, media, illustration</keywords>
                    </t>
                    <t t-snippet="website.s_three_columns" t-thumbnail="/website/static/src/img/snippets_thumbs/s_three_columns.svg">
                        <keywords>columns, description</keywords>
                    </t>
                    <t t-snippet="website.s_color_blocks_2" t-thumbnail="/website/static/src/img/snippets_thumbs/s_color_blocks_2.svg">
                        <keywords>big</keywords>
                    </t>
                    <t t-snippet="website.s_features" t-thumbnail="/website/static/src/img/snippets_thumbs/s_features.svg">
                        <keywords>promotion, characteristic, quality</keywords>
                    </t>
                    <t t-snippet="website.s_masonry_block" t-thumbnail="/website/static/src/img/snippets_thumbs/s_masonry_block.svg">
                        <keywords>masonry, grid</keywords>
                    </t>
                    <t t-snippet="website.s_image_gallery" t-thumbnail="/website/static/src/img/snippets_thumbs/s_image_gallery.svg">
                        <keywords>gallery, carousel</keywords>
                    </t>
                    <t t-snippet="website.s_images_wall" t-thumbnail="/website/static/src/img/snippets_thumbs/s_images_wall.svg"/>
                    <t t-snippet="website.s_carousel" t-thumbnail="/website/static/src/img/snippets_thumbs/s_carousel.svg">
                        <keywords>gallery, carousel</keywords>
                    </t>
                    <t t-snippet="website.s_media_list" t-thumbnail="/website/static/src/img/snippets_thumbs/s_media_list.svg"/>
                    <t t-snippet="website.s_showcase" t-thumbnail="/website/static/src/img/snippets_thumbs/s_showcase.svg"/>
                    <t t-snippet="website.s_parallax" t-thumbnail="/website/static/src/img/snippets_thumbs/s_parallax.svg"/>
                </div>
            </div>

            <div id="snippet_feature" class="o_panel">
                <div class="o_panel_header">Features</div>
                <div class="o_panel_body">
                    <t t-snippet="website.s_comparisons" t-thumbnail="/website/static/src/img/snippets_thumbs/s_comparisons.svg">
                        <keywords>pricing</keywords>
                    </t>
                    <t t-snippet="website.s_company_team" t-thumbnail="/website/static/src/img/snippets_thumbs/s_company_team.svg">
                        <keywords>organization, structure</keywords>
                    </t>
                    <t t-snippet="website.s_call_to_action" t-thumbnail="/website/static/src/img/snippets_thumbs/s_call_to_action.svg">
                        <keywords>CTA</keywords>
                    </t>
                    <t t-snippet="website.s_references" t-thumbnail="/website/static/src/img/snippets_thumbs/s_references.svg">
                        <keywords>customers, clients</keywords>
                    </t>
                    <t t-snippet="website.s_faq_collapse" t-thumbnail="/website/static/src/img/snippets_thumbs/s_faq_collapse.svg">
                        <keywords>common answers, common questions</keywords>
                    </t>
                    <t t-snippet="website.s_features_grid" t-thumbnail="/website/static/src/img/snippets_thumbs/s_features_grid.svg"/>
                    <t t-snippet="website.s_table_of_content" t-thumbnail="/website/static/src/img/snippets_thumbs/s_table_of_content.svg"/>
                    <t t-snippet="website.s_product_catalog" t-thumbnail="/website/static/src/img/snippets_thumbs/s_product_catalog.svg">
                        <keywords>menu, pricing</keywords>
                    </t>
                    <t t-snippet="website.s_product_list" t-thumbnail="/website/static/src/img/snippets_thumbs/s_product_list.svg"/>
                    <t t-snippet="website.s_tabs" t-thumbnail="/website/static/src/img/snippets_thumbs/s_tabs.svg"/>
                    <t t-snippet="website.s_timeline" t-thumbnail="/website/static/src/img/snippets_thumbs/s_timeline.svg"/>
                    <t t-snippet="website.s_process_steps" t-thumbnail="/website/static/src/img/snippets_thumbs/s_process_steps.svg"/>
                    <t t-snippet="website.s_quotes_carousel" t-thumbnail="/website/static/src/img/snippets_thumbs/s_quotes_carousel.svg">
                        <keywords>testimonials</keywords>
                    </t>
                </div>
            </div>

            <div id="snippet_effect" class="o_panel">
                <div class="o_panel_header">Dynamic Content</div>
                <div class="o_panel_body">
                    <t id="form_form_hook"/>
                    <t t-snippet="website.s_google_map" t-thumbnail="/website/static/src/img/snippets_thumbs/s_google_map.svg"/>
                    <t id="sale_recently_viewed_product_hook"/>
                    <t id="sale_product_search_section_hook"/>
                    <t id="blog_posts_hook"/>
                    <t id="event_local_events_hook"/>
                    <t id="snippet_google_map_hook"/>
                    <t id="mass_mailing_newsletter_block_hook"/>
                    <t id="mass_mailing_newsletter_popup_hook"/>
                    <t t-snippet="website.s_popup" t-thumbnail="/website/static/src/img/snippets_thumbs/s_popup.svg"/>
                    <t t-snippet="website.s_facebook_page" t-thumbnail="/website/static/src/img/snippets_thumbs/s_facebook_page.svg"/>
                    <t t-snippet="website.s_countdown" t-thumbnail="/website/static/src/img/snippets_thumbs/s_countdown.svg">
                        <keywords>celebration, launch</keywords>
                    </t>
                    <t id="mail_channel_discussion_group_hook"/>
                    <t id="twitter_favorite_tweets_hook"/>
                </div>
            </div>

            <div id="snippet_content" class="o_panel">
                <div class="o_panel_header">Inner content</div>
                <div class="o_panel_body">
                    <t t-snippet="website.s_hr" t-thumbnail="/website/static/src/img/snippets_thumbs/s_hr.svg">
                        <keywords>separator, divider</keywords>
                    </t>
                    <t t-snippet="website.s_alert" t-thumbnail="/website/static/src/img/snippets_thumbs/s_alert.svg"/>
                    <t t-snippet="website.s_rating" t-thumbnail="/website/static/src/img/snippets_thumbs/s_rating.svg">
                        <keywords>valuation, rank</keywords>
                    </t>
                    <t t-snippet="website.s_card" t-thumbnail="/website/static/src/img/snippets_thumbs/s_card.svg"/>
                    <t t-snippet="website.s_share" t-thumbnail="/website/static/src/img/snippets_thumbs/s_share.svg"/>
                    <t id="sale_product_search_input_hook"/>
                    <t id="mass_mailing_newsletter_hook"/>
                    <t t-snippet="website.s_text_highlight" t-thumbnail="/website/static/src/img/snippets_thumbs/s_text_highlight.svg"/>
                    <t t-snippet="website.s_chart" t-thumbnail="/website/static/src/img/snippets_thumbs/s_chart.svg">
                        <keywords>chart, table, diagram, pie</keywords>
                    </t>
                    <t t-snippet="website.s_progress_bar" t-thumbnail="/website/static/src/img/snippets_thumbs/s_progress_bar.svg">
                        <keywords>evolution, growth</keywords>
                    </t>
                    <t t-snippet="website.s_badge" t-thumbnail="/website/static/src/img/snippets_thumbs/s_badge.svg"/>
                    <t t-snippet="website.s_blockquote" t-thumbnail="/website/static/src/img/snippets_thumbs/s_blockquote.svg">
                        <keywords>cite</keywords>
                    </t>
                    <t id="event_speaker_bio_hook"/>
                </div>
            </div>
        </t>
    </xpath>

    <xpath expr="//div[@id='snippet_options']/t" position="attributes">
        <attribute name="t-call">website.snippet_options</attribute>
    </xpath>
</template>

<template id="external_snippets" inherit_id="website.snippets" priority="8">
    <xpath expr="//div[@id='snippet_effect']//t[@t-snippet][last()]" position="after">
        <t t-install="website_form" string="Form Builder" t-thumbnail="/website/static/src/img/snippets_thumbs/s_website_form.svg"/>
        <t id="newsletter_popup_snippet" t-install="mass_mailing" string="Newsletter Popup" t-thumbnail="/website/static/src/img/snippets_thumbs/newsletter_subscribe_popup.svg"/>
        <t t-install="website_mail_channel" string="Discussion Group" t-thumbnail="/website/static/src/img/snippets_thumbs/s_channel.svg"/>
        <t t-install="website_twitter" string="Twitter Scroller" t-thumbnail="/website/static/src/img/snippets_thumbs/s_twitter_scroll.svg"/>
    </xpath>
    <xpath expr="//div[@id='snippet_content']//t[@t-snippet][last()]" position="after">
        <t id="newsletter_snippet" t-install="mass_mailing" string="Newsletter" t-thumbnail="/website/static/src/img/snippets_thumbs/s_newsletter_subscribe_form.svg"/>
    </xpath>
</template>

<template id="snippet_options_background_options" inherit_id="web_editor.snippet_options_background_options">
    <xpath expr="//we-button[@data-toggle-bg-image]" position="after">
        <we-button title="Video"
                   data-name="bg_video_toggler_opt"
                   t-att-data-dependencies="images_dependencies"
                   data-toggle-bg-video="true"
                   data-no-preview="true">
            <i class="fa fa-fw fa-film"/>
        </we-button>
    </xpath>
    <xpath expr="//we-button[@data-toggle-bg-filter]" position="attributes">
        <attribute name="data-dependencies" add="bg_video_toggler_opt" separator=","/>
    </xpath>
    <xpath expr="//div[@data-js='BackgroundOptimize']" position="after">
        <!-- Parallax -->
        <div data-js="Parallax"
             t-att-data-selector="selector"
             t-att-data-exclude="exclude"
             t-att-data-target="target">
            <!-- &emsp; -->
            <we-select string=" ⌙ Parallax"
                       data-attribute-name="scrollBackgroundRatio"
                       data-attribute-default-value="0"
                       data-parallax-type-opt="true"
                       data-no-preview="true"
                       data-dependencies="bg_image_opt">
                <we-button data-name="parallax_none_opt" data-select-data-attribute="0">None</we-button>
                <we-button data-select-data-attribute="1">Fixed</we-button>
                <we-button data-name="parallax_top_opt" data-select-data-attribute="1.5">Bottom to Top</we-button>
                <we-button data-name="parallax_bottom_opt" data-select-data-attribute="-1.5">Top to Bottom</we-button>
            </we-select>
            <we-range string="  ⌙ Intensity"
                      data-dependencies="parallax_top_opt"
                      data-select-data-attribute=""
                      data-attribute-name="scrollBackgroundRatio"
                      data-attribute-default-value="0"
                      data-no-preview="true"
                      data-min="0"
                      data-max="3"
                      data-step="0.15"/> <!-- Make sure this cannot land on 1 -->
            <we-range string="  ⌙ Intensity"
                      data-dependencies="parallax_bottom_opt"
                      data-select-data-attribute=""
                      data-attribute-name="scrollBackgroundRatio"
                      data-attribute-default-value="0"
                      data-no-preview="true"
                      data-min="0"
                      data-max="-3"
                      data-step="0.15"/> <!-- Make sure this cannot land on 1 -->
        </div>
        <div data-js="BackgroundVideo"
             t-att-data-selector="selector"
             t-att-data-exclude="exclude"
             t-att-data-target="target">
            <we-row string="⌙ Video">
                <we-videopicker title="Edit video"
                                data-background=""
                                data-name="bg_video_opt"
                                data-dependencies="bg_video_opt"/>
            </we-row>
        </div>
    </xpath>
</template>

<template id="snippet_options_border_line_widgets">
    <we-row t-att-string="label">
        <we-input data-name="border_width_opt"
                  t-att-data-apply-to="apply_to"
                  data-select-style="0"
                  t-attf-data-css-property="border-#{direction and ('%s-' % direction) or ''}width"
                  data-unit="px"
                  t-att-data-extra-class="with_bs_class and 'border'"/>
        <we-select t-attf-data-css-property="border-#{direction and ('%s-' % direction) or ''}style"
                   data-dependencies="border_width_opt"
                   t-att-data-apply-to="apply_to">
            <we-button title="Solid" data-select-style="solid"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: solid;"/></we-button>
            <we-button title="Dashed" data-select-style="dashed"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: dashed;"/></we-button>
            <we-button title="Dotted" data-select-style="dotted"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: dotted;"/></we-button>
            <we-button title="Double" data-select-style="double"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: double; border-left: none; border-right: none;"/></we-button>
        </we-select>
        <we-colorpicker data-dependencies="border_width_opt"
                        t-att-data-apply-to="apply_to"
                        data-select-style="true"
                        t-attf-data-css-property="border-#{direction and ('%s-' % direction) or ''}color"
                        data-color-prefix="border-"/>
    </we-row>
</template>

<template id="snippet_options_border_widgets">
    <t t-call="website.snippet_options_border_line_widgets">
        <t t-set="label">Border</t>
        <t t-set="with_bs_class" t-value="True"/>
    </t>
    <we-input string="Round Corners"
              t-att-data-apply-to="apply_to"
              t-att-data-dependencies="not so_rounded_no_dependencies and 'border_width_opt,bg_color_opt'"
              data-select-style="0" data-css-property="border-radius"
              data-unit="px" data-extra-class="rounded"/>
</template>

<template id="snippet_options_shadow_widgets">
    <we-button-group string="Shadow" data-shadow-class="shadow">
        <we-button data-set-shadow="">None</we-button>
        <we-button data-set-shadow="outset"
                   data-img="/website/static/src/img/snippets_options/shadow_out.svg"
                   data-name="shadow_active_opt"
                   title="Outset"/>
        <we-button data-set-shadow="inset"
                   data-img="/website/static/src/img/snippets_options/shadow_in.svg"
                   data-name="shadow_inset_opt"
                   title="Inset"/>
    </we-button-group>
    <we-multi data-css-property="box-shadow" data-dependencies="shadow_active_opt, shadow_inset_opt">
        <we-colorpicker string="⌙ Color" data-select-style="" data-css-compatible=""/>
        <we-row string="⌙ Offset (X, Y)">
            <we-input data-select-style="" data-unit="px"/>
            <we-input data-select-style="" data-unit="px"/>
        </we-row>
        <we-input string="⌙ Blur" data-select-style="" data-unit="px"/>
        <we-input string="⌙ Spread" data-select-style="" data-unit="px"/>
        <!-- Inset parameter always hidden (as controlled above) but needed -->
        <!-- for the we-multi widget to work properly. -->
        <we-checkbox data-name="fake_inset_shadow_opt" data-select-style="inset"/>
    </we-multi>
</template>

<template id="snippet_options">
    <t t-call="web_editor.snippet_options"/>

    <!-- COLOR, BORDER, SHADOW | .s_three_columns | .s_comparisons -->
    <div data-js="Box"
         data-selector=".s_three_columns .row > div, .s_comparisons .row > div"
         data-target=".card">
        <we-colorpicker string="Colors"
            data-select-style="true"
            data-css-property="background-color"
            data-color-prefix="bg-"/>
        <t t-call="website.snippet_options_border_widgets"/>
        <t t-call="website.snippet_options_shadow_widgets"/>
    </div>

    <!-- COLOR | .s_cards -->
    <div data-selector=".s_card, .accordion .card">
        <we-colorpicker string="Color"
            data-select-style="true"
            data-css-property="background-color"
            data-color-prefix="bg-"/>
    </div>

    <!-- H-ALIGN -->
    <div id="so_text_align" data-selector=".s_share, .s_text_highlight">
        <we-button-group string="Alignment">
            <we-button title="Left" data-select-class="text-left"><i class="fa fa-fw fa-align-left"/></we-button>
            <we-button title="Center" data-select-class="text-center"><i class="fa fa-fw fa-align-center"/></we-button>
            <we-button title="Right" data-select-class="text-right"><i class="fa fa-fw fa-align-right"/></we-button>
        </we-button-group>
    </div>

    <div id="so_width" data-selector=".s_alert, .s_card, .s_blockquote, .s_text_highlight">
        <we-select string="Width">
            <we-button data-select-class="w-25">25%</we-button>
            <we-button data-select-class="w-50">50%</we-button>
            <we-button data-select-class="w-75">75%</we-button>
            <we-button data-select-class="w-100" data-name="so_width_100">100%</we-button>
        </we-select>
    </div>

    <div id="so_block_align" data-selector=".s_alert, .s_card, .s_blockquote, .s_text_highlight">
        <we-button-group string="Alignment" data-dependencies="!so_width_100">
            <we-button title="Left" data-select-class="mr-auto"><i class="fa fa-fw fa-align-left"/></we-button>
            <we-button title="Center" data-select-class="mx-auto"><i class="fa fa-fw fa-align-center"/></we-button>
            <we-button title="Right" data-select-class="ml-auto"><i class="fa fa-fw fa-align-right"/></we-button>
        </we-button-group>
    </div>

    <!-- Carousel | .s_carousel | .s_quotes_carousel -->
    <!-- Dedicated colorpicker so that there is not 3 level of
         o_colored_level. Use inline-style color for the same reason. -->
    <t t-call="web_editor.snippet_options_background_options">
        <t t-set="selector" t-value="'section'"/>
        <t t-set="target" t-value="'> .carousel'"/>
        <t t-set="with_colors" t-value="True"/>
        <t t-set="with_images" t-value="True"/>
        <t t-set="css_compatible" t-value="True"/>
    </t>
    <div data-js="Carousel"
         data-selector="section"
         data-target="> .carousel">
        <we-select string="Style">
            <we-button data-select-class="s_carousel_bordered">Bordered</we-button>
            <we-button data-select-class="s_carousel_boxed">Boxed</we-button>
            <we-button data-select-class="s_carousel_rounded">Rounded</we-button>
            <we-divider/>
            <we-button data-select-class="s_carousel_default">Default</we-button>
        </we-select>
        <we-select string="Transition">
            <we-button data-select-class="slide">Slide</we-button>
            <we-button data-select-class="carousel-fade slide">Fade</we-button>
            <we-divider/>
            <we-button data-select-class="">None</we-button>
        </we-select>
        <we-input string="Speed"
                  data-select-data-attribute="0s" data-attribute-name="interval"
                  data-unit="s" data-save-unit="ms" data-step="0.1"/>
    </div>

    <div data-js="CarouselItem"
         data-selector=".s_carousel .carousel-item, .s_quotes_carousel .carousel-item">
        <we-button data-slide="left" data-no-preview="true">
            <i class="fa fa-fw fa-angle-left"/>
        </we-button>
        <we-button data-slide="right" data-no-preview="true" class="mr-2">
            <i class="fa fa-fw fa-angle-right"/>
        </we-button>
        <we-button data-add-slide="true" data-no-preview="true" class="o_we_text_success">
            <i class="fa fa-fw fa-plus"/>
        </we-button>
        <we-button data-remove-slide="true" data-no-preview="true" class="o_we_text_danger">
            <i class="fa fa-fw fa-minus"/>
        </we-button>
    </div>

    <!-- Accordion -->
    <div data-js="collapse"
         data-selector='.accordion > .card'
         data-drop-in='.accordion:has(> .card)'/>

    <div data-js="layout_column"
        data-selector="section"
        data-target="> *:has(> .row:not(.s_nb_column_fixed)), > .s_allow_columns">
        <we-select string="Columns" data-no-preview="true">
            <we-button data-select-count="0" data-name="zero_cols_opt">None</we-button>
            <we-button data-select-count="1">1</we-button>
            <we-button data-select-count="2">2</we-button>
            <we-button data-select-count="3">3</we-button>
            <we-button data-select-count="4">4</we-button>
            <we-button data-select-count="5">5</we-button>
            <we-button data-select-count="6">6</we-button>
        </we-select>
    </div>

    <!-- Move snippets around -->
    <div data-js="SnippetMove"
         data-selector="section, .accordion > .card, .s_showcase .row:not(.s_col_no_resize) > div">
        <we-button class="fa fa-fw fa-angle-up" data-move-snippet="prev" data-no-preview="true" data-name="move_up_opt"/>
        <we-button class="fa fa-fw fa-angle-down" data-move-snippet="next" data-no-preview="true" data-name="move_down_opt"/>
    </div>
    <div data-js="SnippetMove"
         data-selector=".row:not(.s_col_no_resize) > div, .nav-item"
         data-exclude=".s_showcase .row > div"
         data-name="move_horizontally_opt">
        <we-button class="fa fa-fw fa-angle-left" data-move-snippet="prev" data-no-preview="true" data-name="move_left_opt"/>
        <we-button class="fa fa-fw fa-angle-right" data-move-snippet="next" data-no-preview="true" data-name="move_right_opt"/>
    </div>

    <!-- Background -->
    <t t-set="only_bg_color_selector" t-value="'section .row > div, .s_text_highlight'"/>
    <t t-set="only_bg_color_exclude" t-value="'.s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .s_masonry_block .row > div, .s_color_blocks_2 .row > div, .o_mega_menu .row > div, .s_image_gallery .row > div'"/>

    <t t-set="base_only_bg_image_selector" t-value="'.s_tabs .oe_structure > *, footer .oe_structure > *'"/>
    <t t-set="only_bg_image_selector" t-value="base_only_bg_image_selector"/>
    <t t-set="only_bg_image_exclude" t-value="''"/>

    <t t-set="both_bg_color_image_selector" t-value="'section, .carousel-item, .s_masonry_block .row > div, .s_color_blocks_2 .row > div, .parallax'"/>
    <t t-set="both_bg_color_image_exclude" t-value="base_only_bg_image_selector + ', .s_carousel_wrapper, .s_color_blocks_2, .s_image_gallery .carousel-item, .s_google_map'"/>

    <t t-call="web_editor.snippet_options_background_options">
        <t t-set="selector" t-value="both_bg_color_image_selector"/>
        <t t-set="exclude" t-value="both_bg_color_image_exclude"/>
        <t t-set="with_colors" t-value="True"/>
        <t t-set="with_images" t-value="True"/>
        <t t-set="with_color_combinations" t-value="True"/>
    </t>

    <t t-call="web_editor.snippet_options_background_options">
        <t t-set="selector" t-value="only_bg_color_selector"/>
        <t t-set="exclude" t-value="only_bg_color_exclude"/>
        <t t-set="with_colors" t-value="True"/>
        <t t-set="with_images" t-value="False"/>
        <t t-set="with_color_combinations" t-value="True"/>
    </t>

    <t t-call="web_editor.snippet_options_background_options">
        <t t-set="selector" t-value="only_bg_image_selector"/>
        <t t-set="exclude" t-value="only_bg_image_exclude"/>
        <t t-set="with_colors" t-value="False"/>
        <t t-set="with_images" t-value="True"/>
    </t>

    <!-- Border | Columns -->
    <div data-js="Box"
         data-selector="section .row > div"
         data-exclude=".s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .s_image_gallery .row > div">
        <t t-call="website.snippet_options_border_widgets"/>
        <t t-call="website.snippet_options_shadow_widgets"/>
    </div>

    <!-- Mobile display options -->
    <div data-selector="section .row > div">
        <we-checkbox string="Shown On Mobile" data-select-class="d-none d-md-block|" data-no-preview="true"/>
    </div>

    <div data-js="sizing_y"
        data-selector="section, .row > div, .parallax, .s_hr, .carousel-item, .s_rating"
        data-exclude="section:has(> .carousel), .s_image_gallery .carousel-item, .s_col_no_resize.row > div"/>

    <div data-js="sizing_x"
        data-selector=".row > div"
        data-drop-near=".row:not(.s_col_no_resize) > div"
        data-exclude=".s_col_no_resize.row > div"/>

    <t t-set="so_snippet_addition_selector" t-translation="off">section, .parallax, .s_popup</t>
    <div id="so_snippet_addition"
        t-att-data-selector="so_snippet_addition_selector"
        data-drop-in=":not(p).oe_structure:not(.oe_structure_solo), :not(p)[data-oe-type=html], :not(p).oe_structure.oe_structure_solo:not(:has(> section, > div))"/>

    <t t-set="so_content_addition_selector" t-translation="off">blockquote, .s_card:not(.s_timeline_card), .s_alert, .o_facebook_page, .s_share, .s_rating, .s_hr, .s_google_map, .s_countdown, .s_chart, .s_text_highlight, .s_progress_bar, .s_badge</t>
    <div id="so_content_addition"
        t-att-data-selector="so_content_addition_selector"
        t-attf-data-drop-near="p, h1, h2, h3, .row > div > img, #{so_content_addition_selector}"
        data-drop-in=".content, nav"/>

    <div data-js="SnippetSave"
        t-attf-data-selector="#{so_snippet_addition_selector}, #{so_content_addition_selector}">
        <we-button class="fa fa-fw fa-save o_we_link o_we_hover_warning"
                   title="Save the block to use it elsewhere"
                   data-save-snippet=""
                   data-no-preview="true"/>
    </div>

    <div data-js="ul"
         data-selector=":not(li) > ul:has(ul,ol), :not(li) > ol:has(ul,ol)">
        <we-checkbox string="Folded list" data-select-class="o_ul_folded"/>
    </div>

    <div data-js="menu_data"
         data-selector="#top_menu li > a"
         data-exclude=".dropdown-toggle, li.o_header_menu_button a"
         data-no-check="true"/>

    <div data-js="company_data"
         data-selector="[data-oe-expression='res_company.partner_id']"
         data-no-check="true"/>

    <div data-js="Header"
         id="so_header_theme"
         data-selector="#wrapwrap > header"
         data-no-check="true"
         groups="website.group_website_designer">
        <we-checkbox string="Sign In" data-customize-website-views="portal.portal_show_sign_in" data-reload="/"/>
        <we-colorpicker string="Colors"
                        data-customize-website-color="" data-color="menu"
                        data-with-combinations="true"/>
        <we-checkbox id="option_header_shadow" string="Shadow"
                     data-customize-website-views="website.header_shadow"
                     data-select-class="shadow"
                     data-no-preview="true"/>
        <we-select string="Logo" data-reload="/">
            <we-button data-customize-website-views="website.website_name">Text</we-button>
            <we-button data-customize-website-views="website.layout_logo_show">Image</we-button>
            <we-button data-customize-website-views="website.header_logo_none" data-name="header_logo_none_opt">None</we-button>
        </we-select>
        <we-input string="⌙ Height"
                  data-dependencies="!header_logo_none_opt"
                  data-customize-website-variable="null"
                  data-variable="logo-height"
                  data-unit="px"
                  data-save-unit="rem"/>
        <we-input string="⌙ Height (Scrolled)"
                  data-name="option_logo_height_scrolled"
                  data-customize-website-variable="null"
                  data-variable="fixed-logo-height"
                  data-unit="px"
                  data-save-unit="rem"
                  data-dependencies="!header_effect_scroll_opt"/>
        <we-row string="Font">
            <we-fontfamilypicker data-variable="navbar-font"/>
            <we-input data-customize-website-variable="null" data-variable="header-font-size" data-unit="px" data-save-unit="rem"/>
        </we-row>
        <we-select id="header_templates_select" data-variable="header-template" string="Template" data-reload="/">
            <we-button id="option_template_header_logo_menu"
                       data-name="header_logo_menu_opt"
                       data-customize-website-views=""
                       data-customize-website-variable="'logo_menu'"
                       string="Logo - Menu"/>
            <we-button id="option_template_header_hamburger_logo_centered"
                       data-name="header_hamburger_logo_centered_opt"
                       data-customize-website-views="website.template_header_hamburger, website.template_header_hamburger_left"
                       data-customize-website-variable="'hamburger_logo'"
                       string="Hamburger - Logo"/>
            <we-button id="option_template_header_logo_menu_below"
                       data-name="header_logo_menu_below_opt"
                       data-customize-website-views=""
                       data-customize-website-variable="'logo_menu_below'"
                       string="Logo (Top) - Menu"/>
            <we-button id="option_template_header_menu_logo_below"
                       data-name="header_menu_logo_below_opt"
                       data-customize-website-views=""
                       data-customize-website-variable="'menu_logo_below'"
                       string="Menu - Logo (Bottom)"/>
            <we-button id="option_template_header_logo_hamburger"
                       data-name="header_logo_hamburger_opt"
                       data-customize-website-views="website.template_header_hamburger, website.template_header_navbar_text_center"
                       data-customize-website-variable="'logo_hamburger'"
                       string="Logo - Hamburger (cover)"/>
        </we-select>
        <we-select id="header_effect_list" string="Effect">
            <we-button id="option_header_effect_standard"
                       data-name="header_effect_standard_opt"
                       data-select-class="o_header_standard o_top_fixed_element"
                       data-customize-website-views="website.header_visibility_standard"
                       string="Standard"/>
            <we-button id="option_header_effect_scroll"
                       data-name="header_effect_scroll_opt"
                       data-select-class=""
                       data-customize-website-views=""
                       string="Scroll"/>
            <we-button id="option_header_effect_fixed"
                       data-name="header_effect_fixed_opt"
                       data-select-class="o_header_fixed o_top_fixed_element"
                       data-customize-website-views="website.header_visibility_fixed"
                       string="Fixed"/>
            <we-button id="option_header_effect_disappears"
                       data-name="header_effect_disappears_opt"
                       data-select-class="o_header_disappears o_top_fixed_element"
                       data-customize-website-views="website.header_visibility_disappears"
                       string="Disappears"/>
            <we-button id="option_header_effect_fade_out"
                       data-name="header_effect_fade_out_opt"
                       data-select-class="o_header_fade_out o_top_fixed_element"
                       data-customize-website-views="website.header_visibility_fade_out"
                       string="Fade Out"/>
        </we-select>
        <we-select id="option_header_dropdown" string="Sub Menus" data-no-preview="true">
            <we-button data-select-class="o_hoverable_dropdown"
                       data-customize-website-views="website.header_hoverable_dropdown">On Hover</we-button>
            <we-button data-select-class="" data-name="header_dropdown_on_click_opt">On Click</we-button>
        </we-select>

        <we-checkbox string="Button" data-customize-website-views="website.header_button" data-reload="/"/>
    </div>

    <div data-js="TopMenuVisibility"
        data-selector="[data-main-object^='website.page('] #wrapwrap > header"
        data-no-check="true">
        <we-select string="Visibility (On This Page)" id="option_header_visibility" data-no-preview="true">
            <we-button data-name="regular_header_visibility_opt"
                       data-visibility="regular">Regular</we-button>
            <we-button data-visibility="transparent">Transparent</we-button>
            <we-button data-visibility="hidden">Hidden</we-button>
        </we-select>
    </div>

    <div data-js="topMenuColor"
         data-selector="[data-main-object^='website.page('] #wrapwrap > header"
         data-no-check="true">
        <we-colorpicker string="Transparent color"
            id="option_header_transparent_color"
            data-select-style="true"
            data-css-property="background-color"
            data-color-prefix="bg-"
            data-excluded="theme, common, custom"/>
    </div>

    <div data-selector="#wrapwrap > footer"
         data-no-check="true"
         groups="website.group_website_designer">
        <we-colorpicker string="Colors"
                        data-customize-website-color="" data-color="footer"
                        data-with-combinations="true"/>
        <we-select string="Footer Template" data-variable="footer-template" data-reload="/">
            <we-button id="option_template_footer_products_contacts_about_us"
                       data-customize-website-views="website.footer_custom"
                       data-customize-website-variable="'products_contacts_about_us'"
                       string="Products - Contacts - About us"/>
            <we-button id="option_template_footer_logo_about_us_below"
                       data-customize-website-views="website.template_footer_logo_about_us_below"
                       data-customize-website-variable="'logo_about_us_below'"
                       string="Logo - About us"/>
            <we-button id="option_template_footer_links_address_logo"
                       data-customize-website-views="website.template_footer_links_address_logo"
                       data-customize-website-variable="'links_address_logo'"
                       string="Links - Address - Logo"/>
            <we-button id="option_template_footer_name_logo_links_about_us"
                       data-customize-website-views="website.template_footer_name_logo_links_about_us"
                       data-customize-website-variable="'name_logo_links_about_us'"
                       string="Name - Logo - Links - About us"/>
            <we-button id="option_template_footer_logo_only"
                       data-customize-website-views="website.template_footer_logo_only"
                       data-customize-website-variable="'logo_only'"
                       string="Logo only"/>
            <we-button id="option_template_footer_address_logo"
                       data-customize-website-views="website.template_footer_address_logo"
                       data-customize-website-variable="'address_logo'"
                       string="Address - Logo"/>
        </we-select>
        <we-select string="Slideout Effect" data-variable="footer-effect" data-reload="/">
            <we-button string="Regular"
                       data-customize-website-views=""
                       data-customize-website-variable=""/>
            <we-button string="Slide Hover"
                       data-customize-website-views="website.template_footer_slideout"
                       data-customize-website-variable="'slideout_slide_hover'"/>
            <we-button string="Shadow"
                       data-customize-website-views="website.template_footer_slideout"
                       data-customize-website-variable="'slideout_shadow'"/>
        </we-select>
        <we-checkbox string="Copyright"
                data-name="footer_copyright_opt"
                data-customize-website-views="website.footer_no_copyright|"
                data-no-preview="true"
                data-reload="/"/>
        <we-checkbox string="Language Selector"
                data-dependencies="!footer_copyright_opt"
                data-customize-website-views="website.footer_no_copyright|portal.footer_language_selector"
                data-no-preview="true"
                data-reload="/"/>
    </div>

    <div data-js="HideFooter"
        data-selector="[data-main-object^='website.page('] #wrapwrap > footer"
        data-no-check="true"
        groups="website.group_website_designer">
        <we-checkbox string="Show on this page"
                     data-name="hide_footer_page_opt"
                     data-visibility="hidden|shown"
                     data-no-preview="true"/>
    </div>

    <div data-selector=".o_footer_copyright"
         data-no-check="true"
         groups="website.group_website_designer">
        <we-colorpicker string="Colors"
                        data-customize-website-color="" data-color="copyright"
                        data-with-combinations="true"/>
        <we-select string="Language Selector" data-reload="/">
            <we-button data-name="language_selector_none_opt"
                       data-customize-website-views="">None</we-button>
            <we-button data-customize-website-views="portal.footer_language_selector">Dropdown</we-button>
            <we-button data-customize-website-views="portal.footer_language_selector, website.footer_language_selector_inline">Inline</we-button>
        </we-select>
        <we-select string="⌙ Label" data-dependencies="!language_selector_none_opt" data-reload="/">
            <we-button data-customize-website-views="">Text</we-button>
            <we-button data-customize-website-views="website.footer_language_selector_flag, website.footer_language_selector_no_text">Flag</we-button>
            <we-button data-customize-website-views="website.footer_language_selector_flag">Flag and Text</we-button>
        </we-select>
    </div>

    <!-- Anchor Name -->
    <div data-js="anchor"
        data-selector=":not(p).oe_structure > *, :not(p)[data-oe-type=html] > *"
        data-exclude=".modal *, .oe_structure .oe_structure *, [data-oe-type=html] .oe_structure *">
        <we-button class="fa fa-fw fa-link o_we_link"
                   title="Create a link to target this section"
                   data-no-preview="true"/>
    </div>

    <!-- Mega Menu settings -->
    <div data-selector=".o_mega_menu">
        <we-select string="Size">
            <we-button data-select-class="">Full-Width</we-button>
            <we-button data-select-class="o_mega_menu_container_size">Narrow</we-button>
        </we-select>
    </div>

    <div data-selector=".o_mega_menu .nav-link"
         data-drop-in=".o_mega_menu nav"
         data-drop-near=".o_mega_menu .nav-link"/>

    <div data-js="CoverProperties" data-selector=".o_record_cover_container" data-no-check="true">
        <we-row string="Background" class="o_we_full_row">
            <t t-call="web_editor.snippet_options_background_color_widget">
                <t t-set="with_color_combinations" t-value="True"/>
            </t>
            <we-button-group class="ml-auto">
                <we-imagepicker title="Image" data-background="" data-button-style="true"/>
                <we-button title="None" data-background="">
                    <i class="fa fa-fw fa-ban"/>
                </we-button>
            </we-button-group>
        </we-row>
        <we-select string="Size" data-cover-opt-name="size">
            <we-button data-select-class="o_full_screen_height">Full Screen</we-button>
            <we-button class="o_record_cover_opt_size_default" data-select-class="o_half_screen_height">Half Screen</we-button>
            <we-button data-select-class="cover_auto">Fit text</we-button>
        </we-select>
        <we-select string="Filter Intensity" data-cover-opt-name="filters">
            <we-button data-filter-value="0.0">None</we-button>
            <we-button data-filter-value="0.2">Low</we-button>
            <we-button data-filter-value="0.4">Medium</we-button>
            <we-button data-filter-value="0.6">High</we-button>
        </we-select>
        <we-select string="Text Alignment" data-cover-opt-name="text_align">
            <we-button data-select-class="">Left</we-button>
            <we-button data-select-class="text-center">Centered</we-button>
            <we-button data-select-class="text-right">Right</we-button>
        </we-select>
    </div>

    <!-- Stretch section -->
    <div data-js="ContainerWidth" data-selector="section, .s_carousel .carousel-item, s_quotes_carousel .carousel-item"
        data-target="> .container, > .container-fluid, > .o_container_small">
        <we-button-group string="Content Width">
            <we-button data-select-class="o_container_small"
                       data-img="/website/static/src/img/snippets_options/content_width_small.svg"
                       title="Small"/>
            <we-button data-select-class="container"
                       data-img="/website/static/src/img/snippets_options/content_width_normal.svg"
                       title="Regular"/>
            <we-button data-select-class="container-fluid"
                       data-img="/website/static/src/img/snippets_options/content_width_full.svg"
                       title="Full"/>
        </we-button-group>
    </div>

    <!-- Min height of section -->
    <div data-selector="section">
        <we-button-group string="Height">
            <we-button data-select-class="" title="Fit content">Auto</we-button>
            <we-button data-select-class="o_half_screen_height" title="Half screen">50%</we-button>
            <we-button data-select-class="o_full_screen_height" title="Full screen">100%</we-button>
        </we-button-group>
    </div>

    <!-- Scroll to next section button (only for full height) -->
    <div data-js="ScrollButton" data-selector="section">
        <we-row string="Scroll down button" class="o_scroll_button_opt">
            <we-checkbox data-toggle-button="true"
                data-no-preview="true"
                data-name="scroll_button_opt"/>
            <we-colorpicker
                data-select-style="true"
                data-css-property="background-color"
                data-color-prefix="bg-"
                data-apply-to=".o_scroll_button"
                data-dependencies="scroll_button_opt"/>
            <we-colorpicker data-select-style="true"
                data-css-property="color"
                data-color-prefix="text-"
                data-apply-to=".o_scroll_button"
                data-dependencies="scroll_button_opt"/>
        </we-row>
    </div>

    <!--  Vertical Alignment -->
    <div id="row_valign_snippet_option" data-selector=".s_text_image, .s_image_text, .s_three_columns" data-target=".row">
        <we-button-group string="Vert. Alignment" title="Vertical Alignment">
            <we-button title="Align Top"
                       data-select-class="align-items-start"
                       data-img="/website/static/src/img/snippets_options/align_top.svg"/>
            <we-button title="Align Middle"
                       data-select-class="align-items-center"
                       data-img="/website/static/src/img/snippets_options/align_middle.svg"/>
            <we-button title="Align Bottom"
                       data-select-class="align-items-end"
                       data-img="/website/static/src/img/snippets_options/align_bottom.svg"/>
            <we-button title="Stretch to Equal Height"
                       data-select-class="align-items-stretch"
                       data-img="/website/static/src/img/snippets_options/align_stretch.svg"/>
        </we-button-group>
    </div>

    <!-- Cookies Bar -->
    <div data-selector="#website_cookies_bar" data-js="CookiesBar" data-target=".modal">
        <we-select string="Layout" class="o_we_inline">
            <we-button data-select-class="o_cookies_discrete" data-select-layout="discrete" data-trigger="position_bottom,s_popup_size_full">Discrete</we-button>
            <we-button data-select-class="o_cookies_classic" data-select-layout="classic" data-trigger="position_bottom,s_popup_size_full">Classic</we-button>
            <we-button data-name="layout_popup_opt" data-select-class="o_cookies_popup" data-select-layout="popup" data-trigger="position_middle,s_popup_size_md">Popup</we-button>
        </we-select>
    </div>

    <!-- Theme options -->
    <div data-js="ThemeColors" data-selector="theme-colors" data-no-check="true">
        <we-alert class="o_old_color_system_warning d-none">
            It appears your website is still using the old color system of
            Odoo 13.0 in some places. We made sure it is still working but
            we recommend you to try to use the new color system, which is
            still customizable.
        </we-alert>
        <we-row class="o_we_theme_colors_selector">
            <we-colorpicker data-name="color_1_opt" title="Primary"
                            data-customize-website-color="" data-color="o-color-1"
                            data-use-css-color="true"/>
            <we-colorpicker data-name="color_2_opt" title="Secondary"
                            data-customize-website-color="" data-color="o-color-2"
                            data-use-css-color="true"/>
            <we-colorpicker data-customize-website-color="" data-color="o-color-3"
                            data-use-css-color="true"/>
            <we-colorpicker data-customize-website-color="" data-color="o-color-4"
                            data-use-css-color="true"/>
            <we-colorpicker data-customize-website-color="" data-color="o-color-5"
                            data-use-css-color="true"/>
            <we-select data-icon="fa-lightbulb-o" class="o_we_theme_colors_select" data-variable="color-palettes-number"/>
        </we-row>
        <div class="o_color_combinations_edition"/>
    </div>
    <div data-js="OptionsTab" data-selector="theme-options" data-no-check="true">
        <we-checkbox string="Show Header"
                     data-customize-website-views="website.option_layout_hide_header|"
                     data-reload="/"/>
        <we-select string="Layout">
            <we-button data-customize-website-views="" data-name="layout_full_opt">Full</we-button>
            <we-button data-customize-website-views="website.option_layout_boxed_variables" id="option_layout_boxed">Boxed</we-button>
        </we-select>
        <we-row string="⌙ Background" data-no-preview="true">
            <we-colorpicker data-dependencies="!layout_full_opt"
                            data-customize-website-color=""
                            data-color="body"/>
            <we-button-group>
                <we-button title="Image"
                           data-customize-website-views="website.option_custom_body_image"
                           data-enable-imagepicker="body_bg_image_opt"><i class="fa fa-fw fa-camera"/></we-button>
                <we-button title="Pattern"
                           data-customize-website-views="website.option_custom_body_image, website.option_custom_body_pattern"
                           data-enable-imagepicker="body_bg_image_opt"><i class="fa fa-fw fa-th"/></we-button>
                <we-button title="None"
                           data-customize-website-views=""><i class="fa fa-fw fa-ban"/></we-button>
            </we-button-group>
            <!-- Hidden imagepicker enabled by above button-group -->
            <we-imagepicker data-name="body_bg_image_opt" data-customize-body-bg=""/>
        </we-row>
        <we-input string="Font size"
                  data-customize-website-variable="null"
                  data-variable="font-size-base"
                  data-unit="px"
                  data-save-unit="rem"/>
        <we-fontfamilypicker string="Font family" data-variable="font"/>
        <we-fontfamilypicker string="⌙ Headings" data-variable="headings-font"/>
        <we-fontfamilypicker string="⌙ Buttons" data-variable="buttons-font"/>
        <we-select string="Main Buttons" data-variable="btn-primary-outline">
            <we-button data-customize-website-variable="false">Fill</we-button>
            <we-button data-customize-website-variable="true">Outline</we-button>
        </we-select>
        <we-select string="Buttons" data-variable="btn-secondary-outline">
            <we-button data-customize-website-variable="false">Fill</we-button>
            <we-button data-customize-website-variable="true">Outline</we-button>
        </we-select>
        <we-select string="Link Style" data-variable="link-underline">
            <we-button data-customize-website-variable="'never'">Normal</we-button>
            <we-button data-customize-website-variable="'hover'">Underline On Hover</we-button>
            <we-button data-customize-website-variable="'always'">Always Underlined</we-button>
        </we-select>
        <we-row string="Status Colors">
            <we-colorpicker title="Success" data-customize-website-color="" data-color-type="theme" data-color="success"/>
            <we-colorpicker title="Info" data-customize-website-color="" data-color-type="theme" data-color="info"/>
            <we-colorpicker title="Warning" data-customize-website-color="" data-color-type="theme" data-color="warning"/>
            <we-colorpicker title="Error" data-customize-website-color="" data-color-type="theme" data-color="danger"/>
        </we-row>
    </div>
    <div data-js="OptionsTab" data-selector="website-settings" data-no-check="true">
        <we-row string="Theme">
            <we-button data-switch-theme="" data-no-preview="true">Switch Theme</we-button>
        </we-row>
        <we-row string="Code Injection" title="Enter code that will be added into every page of your site">
            <we-button data-no-preview="true" data-open-custom-code-dialog="head">&amp;lt;head&amp;gt;</we-button>
            <we-button data-no-preview="true" data-open-custom-code-dialog="footer">&amp;lt;/body&amp;gt;</we-button>
        </we-row>
        <we-row string="Google Map">
            <we-button data-configure-api-key="" data-no-preview="true">Custom Key</we-button>
        </we-row>
    </div>
</template>
</odoo>