[REF] website: move s_chart snippet to dedicated files

3 files changed, 641 insertions, 0 deletions

diff --git a/addons/website/views/assets.xml b/addons/website/views/assets.xml
index 39137714e4c..5b2d8c6c0c6 100644
--- a/addons/website/views/assets.xml
+++ b/addons/website/views/assets.xml
@@ -111,6 +111,7 @@
     <script type="text/javascript" src="/website/static/src/snippets/s_facebook_page/options.js"/>
     <script type="text/javascript" src="/website/static/src/snippets/s_image_gallery/options.js"/>
     <script type="text/javascript" src="/website/static/src/snippets/s_countdown/options.js"/>
+    <script type="text/javascript" src="/website/static/src/snippets/s_chart/options.js"/>
 
     <script type="text/javascript" src="/website/static/src/js/editor/wysiwyg_multizone.js"/>
     <script type="text/javascript" src="/website/static/src/js/editor/wysiwyg_multizone_translate.js"/>
diff --git a/addons/website/views/snippets/s_chart.xml b/addons/website/views/snippets/s_chart.xml
new file mode 100644
index 00000000000..574e78a9c52
--- /dev/null
+++ b/addons/website/views/snippets/s_chart.xml
@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_chart" name="Chart">
+    <div class="s_chart" data-type="bar" data-legend-position="top" data-tooltip-display="true" data-stacked="false" data-border-width="2"
+            data-data="{
+                &quot;labels&quot;:[&quot;First&quot;,&quot;Second&quot;,&quot;Third&quot;,&quot;Fourth&quot;,&quot;Fifth&quot;],
+                &quot;datasets&quot;:[
+                    {
+                        &quot;label&quot;:&quot;One&quot;,
+                        &quot;data&quot;:[&quot;12&quot;,&quot;24&quot;,&quot;18&quot;,&quot;17&quot;,&quot;10&quot;],
+                        &quot;backgroundColor&quot;:&quot;alpha&quot;,
+                        &quot;borderColor&quot;:&quot;alpha&quot;
+                    }
+                ]
+            }">
+        <h2>A Chart Title</h2>
+        <canvas/>
+    </div>
+</template>
+
+<template id="s_chart_options" inherit_id="website.snippet_options">
+    <xpath expr="." position="inside">
+        <div data-js="InnerChart" string="Chart"
+            data-selector=".s_chart">
+            <we-colorpicker string="Background Color"
+                data-select-style="true"
+                data-css-property="background-color"
+                data-color-prefix="bg-"/>
+            <we-select string="Type" data-attribute-name="type" data-attribute-default-value="bar" data-no-preview="true">
+                <we-button data-select-data-attribute="bar" data-name="bar_chart_opt">Bar Vertical</we-button>
+                <we-button data-select-data-attribute="horizontalBar" data-name="horizontal_bar_chart_opt">Bar Horizontal</we-button>
+                <we-button data-select-data-attribute="line">Line</we-button>
+                <we-button data-select-data-attribute="pie">Pie</we-button>
+                <we-button data-select-data-attribute="doughnut">Doughnut</we-button>
+                <we-button data-select-data-attribute="radar">Radar</we-button>
+            </we-select>
+            <we-checkbox string="Stacked" data-name="stacked_chart_opt" data-dependencies="bar_chart_opt, horizontal_bar_chart_opt"
+                        data-select-data-attribute="false|true" data-attribute-name="stacked" data-no-preview="true"/>
+            <we-select string="Legend" data-attribute-name="legendPosition" data-attribute-default-value="top" data-no-preview="true">
+                <we-button data-select-data-attribute="none">None</we-button>
+                <we-button data-select-data-attribute="top">Top</we-button>
+                <we-button data-select-data-attribute="left">Left</we-button>
+                <we-button data-select-data-attribute="bottom">Bottom</we-button>
+                <we-button data-select-data-attribute="right">Right</we-button>
+            </we-select>
+            <we-checkbox string="Tooltip" data-select-data-attribute="false|true" data-attribute-name="tooltipDisplay" data-no-preview="true"/>
+            <we-matrix>
+                <table>
+                    <tr>
+                        <th/>
+                        <th><we-button class="fa fa-fw fa-plus add_column"/></th>
+                    </tr>
+                    <tr>
+                        <th><we-button class="fa fa-fw fa-plus add_row"/></th>
+                    </tr>
+                </table>
+            </we-matrix>
+            <we-colorpicker string="Background" data-name="chart_bg_color_opt"
+                data-color-change=""
+                data-attribute-name="backgroundColor"
+                data-no-preview="true"/>
+            <we-colorpicker string="Border" data-name="chart_border_color_opt"
+                data-color-change=""
+                data-attribute-name="borderColor"
+                data-no-preview="true"/>
+            <we-input class="o_we_inline" string="Border Width" data-select-data-attribute="2px" data-attribute-name="borderWidth" data-unit="px"/>
+        </div>
+    </xpath>
+</template>
+
+<template id="assets_snippet_s_chart_js_000" inherit_id="website.assets_frontend">
+    <xpath expr="//script[last()]" position="after">
+        <script type="text/javascript" src="/website/static/src/snippets/s_chart/000.js"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
new file mode 100644
index 00000000000..e7abb71f560
--- /dev/null
+++ b/addons/website/views/snippets/snippets.xml
@@ -0,0 +1,562 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_parallax" name="Parallax">
+    <section class="s_parallax parallax s_parallax_is_fixed bg-black-50 pt160 pb160" data-scroll-background-ratio="1">
+        <span class="s_parallax_bg oe_img_bg oe_custom_bg" style="background-image: url('/web/image/website.s_parallax_default_image'); background-position: 50% 75%;"/>
+        <div class="oe_structure">
+            <section>
+                <div class="container">
+                    <div class="row s_nb_column_fixed">
+                        <div class="col-lg-12 s_title pt16 pb16" style="text-align: center;">
+                            <h1 class="s_title_boxed"><font style="font-size: 62px;">Your Site Title</font></h1>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </section>
+</template>
+
+<template id="s_quotes_carousel" name="Quotes">
+    <section class="s_quotes_carousel_wrapper">
+        <div id="myQuoteCarousel" class="s_quotes_carousel s_carousel_default carousel slide" data-interval="10000">
+            <!-- Indicators -->
+            <ol class="carousel-indicators">
+                <li data-target="#myQuoteCarousel" data-slide-to="0" class="active"></li>
+                <li data-target="#myQuoteCarousel" data-slide-to="1"></li>
+                <li data-target="#myQuoteCarousel" data-slide-to="2"></li>
+            </ol>
+            <!-- Content -->
+            <div class="carousel-inner">
+                <!-- #01 -->
+                <div class="carousel-item active bg-200 pt80 pb80" data-name="Slide">
+                    <div class="container">
+                        <div class="row content">
+                            <blockquote class="carousel-content col-lg-6 bg-white offset-lg-3">
+                                <i class="fa fa-1x fa-quote-left rounded-0 bg-secondary s_quotes_carousel_icon"/>
+                                <p>Write a quote here from one of your customers. Quotes are a great way to build confidence in your products or services.</p>
+                                <footer>
+                                    <img class="img" src="/web/image/website.s_quotes_carousel_demo_image_3" alt=""/>
+                                    <span>— Jane DOE, CEO of <b>MyCompany</b></span>
+                                </footer>
+                            </blockquote>
+                        </div>
+                    </div>
+                </div>
+                <!-- #02 -->
+                <div class="carousel-item oe_img_bg pt80 pb80" style="background-image: url('/web/image/website.s_quotes_carousel_demo_image_1'); background-position: 50% 50%;" data-name="Slide">
+                    <div class="container">
+                        <div class="row content">
+                            <blockquote class="col-lg-6 bg-white">
+                                <p>Odoo provides essential platform for our project management. Things are better organized and more visible with it.</p>
+                                <footer>
+                                    <img class="img" src="/web/image/website.s_quotes_carousel_demo_image_4" alt=""/>
+                                    <span>— John DOE, CEO of <b>MyCompany</b></span>
+                                </footer>
+                            </blockquote>
+                        </div>
+                    </div>
+                </div>
+                <!-- #03 -->
+                <div class="carousel-item oe_img_bg pt80 pb80" style="background-image: url('/web/image/website.s_quotes_carousel_demo_image_2'); background-position: 50% 50%;" data-name="Slide">
+                    <div class="container">
+                        <div class="row content">
+                            <blockquote class="col-lg-6 offset-lg-6 bg-white">
+                                <p>Odoo provides essential platform for our project management. Things are better organized and more visible with it.</p>
+                                <footer class="blockquote-footer">
+                                    <img class="img" src="/web/image/website.s_quotes_carousel_demo_image_5" alt=""/>
+                                    <span>— Jane DOE, CEO of <b>MyCompany</b></span>
+                                </footer>
+                            </blockquote>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Controls -->
+            <div class="carousel-control-prev" data-target="#myQuoteCarousel" data-slide="prev" role="img" aria-label="Previous" title="Previous">
+                <span class="carousel-control-prev-icon"/>
+                <span class="sr-only">Previous</span>
+            </div>
+            <div class="carousel-control-next" data-target="#myQuoteCarousel" data-slide="next" role="img" aria-label="Next" title="Next">
+                <span class="carousel-control-next-icon"/>
+                <span class="sr-only">Next</span>
+            </div>
+        </div>
+    </section>
+</template>
+
+<!-- Mega menu snippets -->
+
+<template id="s_mega_menu_multi_menus" name="Multi-Menus">
+    <section class="s_mega_menu_multi_menus py-4">
+        <div class="container">
+            <div class="row">
+                <t t-set="menu1_title">First Menu</t>
+                <t t-set="menu2_title">Second Menu</t>
+                <t t-set="menu3_title">Third Menu</t>
+                <t t-set="menu4_title">Last Menu</t>
+                <t t-foreach="[menu1_title, menu2_title, menu3_title, menu4_title]" t-as="menu_title">
+                    <div class="col-lg-3 py-2 text-center">
+                        <h4 t-esc="menu_title"/>
+                        <nav class="nav flex-column">
+                            <t t-foreach="3" t-as="i">
+                                <t t-set="text">Menu Item %s</t>
+                                <t t-set="text" t-value="text % (i + 1)"/>
+                                <a href="#" class="nav-link" data-name="Menu Item"
+                                   t-esc="text"/>
+                            </t>
+                        </nav>
+                    </div>
+                </t>
+            </div>
+        </div>
+    </section>
+</template>
+
+<template id="s_mega_menu_menu_image_menu" name="Menu - Image - Menu">
+    <section class="s_mega_menu_menu_image_menu py-4">
+        <div class="container">
+            <div class="row align-items-center">
+                <div class="col-lg-4 py-2 text-center">
+                    <h4>Left Menu</h4>
+                    <nav class="nav flex-column">
+                        <t t-foreach="3" t-as="i">
+                            <t t-set="text">Menu Item %s</t>
+                            <t t-set="text" t-value="text % (i + 1)"/>
+                            <a href="#" class="nav-link" data-name="Menu Item"
+                                t-esc="text"/>
+                        </t>
+                    </nav>
+                </div>
+                <div class="col-lg-4 py-2 text-center">
+                    <img class="img-fluid" src="/web/image/website.s_mega_menu_menu_image_menu_default_image"/>
+                </div>
+                <div class="col-lg-4 py-2 text-center">
+                    <h4>Right Menu</h4>
+                    <nav class="nav flex-column">
+                        <t t-foreach="3" t-as="i">
+                            <t t-set="text">Menu Item %s</t>
+                            <t t-set="text" t-value="text % (i + 1)"/>
+                            <a href="#" class="nav-link" data-name="Menu Item"
+                                t-esc="text"/>
+                        </t>
+                    </nav>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<!-- Snippets menu -->
+<template id="snippets" inherit_id="web_editor.snippets" primary="True">
+    <xpath expr="//div[@id='o_scroll']" position="replace">
+        <div id="o_scroll">
+            <div id="snippet_mega_menu" class="o_panel d-none">
+                <div class="o_panel_header">
+                    <i class="fa fa-puzzle-piece"/> 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.png"/>
+                    <t t-snippet="website.s_mega_menu_menu_image_menu" t-thumbnail="/website/static/src/img/snippets_thumbs/s_mega_menu_menu_image_menu.png"/>
+                </div>
+            </div>
+
+            <div id="snippet_structure" class="o_panel">
+                <div class="o_panel_header">
+                    <i class="fa fa-th-large"/> Structure
+                </div>
+                <div class="o_panel_body">
+                    <t t-snippet="website.s_banner" t-thumbnail="/website/static/src/img/snippets_thumbs/s_banner.png"/>
+                    <t t-snippet="website.s_cover" t-thumbnail="/website/static/src/img/snippets_thumbs/s_cover.png"/>
+                    <t t-snippet="website.s_text_image" t-thumbnail="/website/static/src/img/snippets_thumbs/s_text_image.png"/>
+                    <t t-snippet="website.s_image_text" t-thumbnail="/website/static/src/img/snippets_thumbs/s_image_text.png"/>
+                    <t t-snippet="website.s_title" t-thumbnail="/website/static/src/img/snippets_thumbs/s_title.png"/>
+                    <t t-snippet="website.s_text_block" t-thumbnail="/website/static/src/img/snippets_thumbs/s_text_block.png"/>
+                    <t t-snippet="website.s_picture" t-thumbnail="/website/static/src/img/snippets_thumbs/s_picture.png"/>
+                    <t t-snippet="website.s_carousel" t-thumbnail="/website/static/src/img/snippets_thumbs/s_carousel.png"/>
+                    <t t-snippet="website.s_features" t-thumbnail="/website/static/src/img/snippets_thumbs/s_features.png"/>
+                    <t t-snippet="website.s_three_columns" t-thumbnail="/website/static/src/img/snippets_thumbs/s_three_columns.png"/>
+                </div>
+            </div>
+
+            <div id="snippet_feature" class="o_panel">
+                <div class="o_panel_header">
+                    <i class="fa fa-diamond"/> Features
+                </div>
+                <div class="o_panel_body">
+                    <t t-snippet="website.s_image_gallery" t-thumbnail="/website/static/src/img/snippets_thumbs/s_image_gallery.png"/>
+                    <t t-snippet="website.s_comparisons" t-thumbnail="/website/static/src/img/snippets_thumbs/s_comparison.png"/>
+                    <t t-snippet="website.s_company_team" t-thumbnail="/website/static/src/img/snippets_thumbs/s_company_team.png"/>
+                    <t t-snippet="website.s_call_to_action" t-thumbnail="/website/static/src/img/snippets_thumbs/s_call_to_action.png"/>
+                    <t t-snippet="website.s_references" t-thumbnail="/website/static/src/img/snippets_thumbs/s_references.png"/>
+                    <t t-snippet="website.s_faq_collapse" t-thumbnail="/website/static/src/img/snippets_thumbs/s_faq.png"/>
+                    <t t-snippet="website.s_features_grid" t-thumbnail="/website/static/src/img/snippets_thumbs/s_features_grid.png"/>
+                    <t t-snippet="website.s_tabs" t-thumbnail="/website/static/src/img/snippets_thumbs/s_tabs.png"/>
+                    <t t-snippet="website.s_countdown" t-thumbnail="/website/static/src/img/snippets_thumbs/s_countdown.png"/>
+                </div>
+            </div>
+
+            <div id="snippet_effect" class="o_panel">
+                <div class="o_panel_header">
+                    <i class="fa fa-magic icon-fix"/> Effects
+                </div>
+                <div class="o_panel_body">
+                    <t t-snippet="website.s_parallax" t-thumbnail="/website/static/src/img/snippets_thumbs/s_parallax.png"/>
+                    <t t-snippet="website.s_quotes_carousel" t-thumbnail="/website/static/src/img/snippets_thumbs/s_quotes_carousel.png"/>
+                </div>
+            </div>
+
+            <div id="snippet_content" class="o_panel">
+                <div class="o_panel_header">
+                    <i class="fa fa-indent"/> Inner content
+                </div>
+                <div class="o_panel_body">
+                    <t t-snippet="website.s_btn" t-thumbnail="/website/static/src/img/snippets_thumbs/s_button.png"/>
+                    <t t-snippet="website.s_hr" t-thumbnail="/website/static/src/img/snippets_thumbs/s_separator.png"/>
+                    <t t-snippet="website.s_alert" t-thumbnail="/website/static/src/img/snippets_thumbs/s_alert.png"/>
+                    <t t-snippet="website.s_card" t-thumbnail="/website/static/src/img/snippets_thumbs/s_card.png"/>
+                    <t t-snippet="website.s_share" t-thumbnail="/website/static/src/img/snippets_thumbs/s_share.png"/>
+                    <t t-snippet="website.s_facebook_page" t-thumbnail="/website/static/src/img/snippets_thumbs/s_facebook_page.png"/>
+                    <t t-snippet="website.s_rating" t-thumbnail="/website/static/src/img/snippets_thumbs/s_rating.png"/>
+                    <t t-snippet="website.s_chart" t-thumbnail="/website/static/src/img/snippets_thumbs/s_chart.png"/>
+                </div>
+            </div>
+        </div>
+    </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_feature']//t[@t-snippet][last()]" position="after">
+        <t id="newsletter_popup_snippet" t-install="mass_mailing" string="Newsletter Popup" t-thumbnail="/website/static/src/img/snippets_thumbs/newsletter_subscribe_popup.png"/>
+        <t id="newsletter_block_snippet" t-install="mass_mailing" string="Newsletter Block" t-thumbnail="/website/static/src/img/snippets_thumbs/s_newsletter_block.png"/>
+        <t t-install="website_twitter" string="Twitter Scroller" t-thumbnail="/website/static/src/img/snippets_thumbs/s_twitter_scroll.png"/>
+        <t t-install="website_form" string="Form Builder" t-thumbnail="/website/static/src/img/s_website_form.png"/>
+        <t id="s_products_searchbar" t-install="website_sale" string="Products Search" t-thumbnail="/website/static/src/img/snippets_thumbs/s_products_searchbar.png"/>
+        <t id="s_products_recently_viewed" t-install="website_sale" string="Products Recently Viewed" t-thumbnail="/website/static/src/img/snippets_thumbs/s_products_recently_viewed.png"/>
+    </xpath>
+    <xpath expr="//div[@id='snippet_content']//t[@t-snippet][last()]" position="after">
+        <t t-install="website_event" string="Local Events" t-thumbnail="/website/static/src/img/snippets_thumbs/s_local_events.png"/>
+        <t t-install="website_mail_channel" string="Discussion Group" t-thumbnail="/website/static/src/img/snippets_thumbs/s_button_channel_subscribe.png"/>
+        <t id="newsletter_snippet" t-install="mass_mailing" string="Newsletter" t-thumbnail="/website/static/src/img/snippets_thumbs/s_newsletter_subscribe_form.png"/>
+        <t id="s_products_searchbar_input" t-install="website_sale" string="Products Search Input" t-thumbnail="/website/static/src/img/snippets_thumbs/s_products_searchbar.png"/>
+    </xpath>
+</template>
+
+<template id="snippet_options">
+    <t t-call="web_editor.snippet_options"/>
+
+    <!-- COLOR | .s_three_columns | .s_comparisons -->
+    <div data-selector=".s_three_columns .row > div, .s_comparisons .row > div, .s_tabs .row > div"
+         data-target=".card">
+        <we-colorpicker string="Color"
+            data-select-style="true"
+            data-css-property="background-color"
+            data-color-prefix="bg-"/>
+    </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 | .s_btn -->
+    <div data-selector=".s_btn, .s_share">
+        <we-select string="Alignment">
+            <we-button data-select-class="text-left">Left</we-button>
+            <we-button data-select-class="text-center">Center</we-button>
+            <we-button data-select-class="text-right">Right</we-button>
+        </we-select>
+    </div>
+
+    <div data-selector=".s_alert, .s_card">
+        <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">100%</we-button>
+        </we-select>
+    </div>
+
+    <!-- Carousel | .s_carousel | .s_quotes_carousel -->
+    <div data-js="Carousel"
+        data-selector="section"
+        data-target="> .carousel">
+        <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-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-input string="Speed" class="o_we_inline"
+                  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=".carousel-item">
+        <we-button data-slide="left" data-no-preview="true" class="fa fa-fw fa-angle-left"/>
+        <we-button data-slide="right" data-no-preview="true" class="fa fa-fw fa-angle-right"/>
+        <we-button data-add-slide="true" data-no-preview="true" class="fa fa-fw fa-plus"/>
+        <we-button data-remove-slide="true" data-no-preview="true" class="fa fa-fw fa-minus"/>
+    </div>
+
+    <div data-js="navTabs" data-selector="section .row > div" data-target=".nav-tabs">
+        <we-button data-add-tab="1" data-no-preview="true">Add Tab</we-button>
+        <we-button data-remove-tab="1" data-name="remove_tab_opt" data-no-preview="true">Remove Tab</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="> * > .row:not(.s_nb_column_fixed)">
+        <we-select string="Number of columns" data-no-preview="true">
+            <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">
+        <we-button class="fa fa-fw fa-angle-up" data-move-snippet="prev" data-no-preview="true"/>
+        <we-button class="fa fa-fw fa-angle-down" data-move-snippet="next" data-no-preview="true"/>
+    </div>
+    <div data-js="SnippetMove"
+         data-selector=".row:not(.s_col_no_resize) > div">
+        <we-button class="fa fa-fw fa-angle-left" data-move-snippet="prev" data-no-preview="true"/>
+        <we-button class="fa fa-fw fa-angle-right" data-move-snippet="next" data-no-preview="true"/>
+    </div>
+
+    <!--  V-ALIGN -->
+    <div id="row_valign_snippet_option" data-selector=".s_text_image, .s_image_text, .s_three_columns" data-target=".row">
+        <we-select string="Alignment">
+            <we-button data-select-class="align-items-start">Top</we-button>
+            <we-button data-select-class="align-items-center">Middle</we-button>
+            <we-button data-select-class="align-items-end">Bottom</we-button>
+            <we-divider/>
+            <we-button data-select-class="align-items-stretch">Equal height</we-button>
+        </we-select>
+    </div>
+
+    <!-- Background Image -->
+    <div data-js="background" string="Background"
+        data-selector="section, .parallax, .carousel-item"
+        data-exclude=".s_hr, .s_image_gallery, .o_gallery .carousel-item"/>
+
+    <!-- Background Image Size/Position -->
+    <div data-js="BackgroundPosition"
+        data-selector="section, .parallax, .carousel-item"
+        data-exclude=".o_gallery .carousel-item">
+        <we-row>
+            <we-select data-no-preview="true">
+                <we-button data-background-type="cover">Cover</we-button>
+                <we-button data-background-type="repeat-pattern" data-name="background_repeat_opt">Repeat pattern</we-button>
+            </we-select>
+            <we-button class="fa fa-fw fa-arrows" title="Background Position"
+                       data-background-position-overlay="true" data-no-preview="true"/>
+        </we-row>
+        <we-multi data-css-property="background-size" data-dependencies="background_repeat_opt">
+            <we-input string="Width" data-select-style="auto" data-unit="px"/>
+            <we-input string="Height" data-select-style="auto" data-unit="px"/>
+        </we-multi>
+    </div>
+
+    <!-- Parallax -->
+    <div data-js="parallax" data-selector=".parallax">
+        <we-select string="Scroll Speed" data-attribute-name="scrollBackgroundRatio" data-attribute-default-value="0">
+            <we-button data-select-data-attribute="0">No-scroll</we-button>
+            <we-divider/>
+            <we-button data-select-data-attribute="1">Fixed</we-button>
+            <we-divider/>
+            <we-button data-select-data-attribute="0.6">Very Slow</we-button>
+            <we-button data-select-data-attribute="1.2">Slow</we-button>
+            <we-button data-select-data-attribute="1.6">Fast</we-button>
+            <we-button data-select-data-attribute="2">Very Fast</we-button>
+        </we-select>
+    </div>
+
+    <!-- Color | Section -->
+    <div id="so_main_colorpicker"
+         data-selector="section, .carousel-item"
+         data-exclude=".parallax, .o_gallery .carousel-item">
+        <we-colorpicker string="Background Color"
+            data-select-style="true"
+            data-css-property="background-color"
+            data-color-prefix="bg-"/>
+    </div>
+
+    <!-- FILTER | .s_parallax -->
+    <div data-selector=".parallax">
+        <we-colorpicker string="Filter"
+            data-select-style="true"
+            data-css-property="background-color"
+            data-color-prefix="bg-"
+            data-excluded="common, theme, custom"/>
+    </div>
+
+    <!-- Color | Columns -->
+    <div data-selector="section .row > div"
+         data-exclude=".s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .o_gallery .row > div">
+        <we-colorpicker string="Background Color"
+            data-select-style="true"
+            data-css-property="background-color"
+            data-color-prefix="bg-"/>
+    </div>
+
+    <div data-selector="section .row > div"
+        data-exclude=".s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .o_gallery .row > div">
+        <we-row string="Border" class="o_we_inline">
+            <we-colorpicker data-dependencies="border_width_opt"
+                            data-select-style="true" data-css-property="border-color" data-color-prefix="border-"/>
+            <we-input class="o_we_inline" data-name="border_width_opt"
+                      data-select-style="0" data-css-property="border-width"
+                      data-unit="px" data-extra-class="border"/>
+        </we-row>
+        <we-input string="Rounded" class="o_we_inline"
+                  data-dependencies="border_width_opt"
+                  data-select-style="0" data-css-property="border-radius"
+                  data-unit="px" data-extra-class="rounded"/>
+        <we-checkbox string="Shadow" data-select-class="shadow"/>
+    </div>
+
+    <div data-js="sizing_y"
+        data-selector="section, .row > div, .parallax, .s_hr, .s_btn, .carousel-item"
+        data-exclude="section:has(> .carousel), .o_gallery .carousel-item"/>
+
+    <div data-js="sizing_x"
+        data-selector=".row > div"
+        data-drop-near=".row > div"
+        data-exclude=".s_col_no_resize.row > div"/>
+
+    <div id="so_snippet_addition"
+        data-selector="section, .parallax"
+        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))"/>
+
+    <!-- Main content drop -->
+    <div id="so_content_addition"
+        data-selector="blockquote, .s_btn, .s_card, .s_alert, .o_facebook_page, .s_share, .s_rating, .s_hr, .s_countdown, .s_chart"
+        data-drop-near="p, h1, h2, h3, blockquote, .s_btn, .s_card, .s_alert, .o_facebook_page, .s_share, .s_rating, .s_hr, .s_chart"
+        data-drop-in=".content, nav"/>
+
+    <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"
+         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="topMenuTransparency"
+        data-selector="[data-main-object^='website.page('] #wrapwrap > header"
+        data-no-check="true">
+        <we-checkbox string="Transparent" data-transparent="true" data-no-preview="true"/>
+    </div>
+
+    <div data-js="topMenuColor"
+         data-selector="[data-main-object^='website.page('] #wrapwrap > header"
+         data-no-check="true">
+        <we-colorpicker string="Background Color"
+            data-select-style="true"
+            data-css-property="background-color"
+            data-color-prefix="bg-"
+            data-excluded="theme, common, custom"/>
+    </div>
+
+    <!-- Anchor Name -->
+    <div data-js="anchor"
+        data-selector=":not(p).oe_structure > *, :not(p)[data-oe-type=html] > *"
+        data-exclude=".modal *">
+        <we-button class="fa fa-fw fa-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-button data-change="true" data-no-preview="true">Change Cover</we-button>
+        <we-button data-clear="true" data-no-preview="true" data-name="remove_cover_opt">Remove Cover</we-button>
+        <we-select string="Size" data-cover-opt-name="size">
+            <we-button data-select-class="o_record_has_cover cover_full">Full Screen</we-button>
+            <we-button class="o_record_cover_opt_size_default" data-select-class="o_record_has_cover cover_mid">Half Screen</we-button>
+            <we-button data-select-class="o_record_has_cover 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="Filter Color" data-cover-opt-name="filters">
+            <we-button data-filter-color="oe_black">Black</we-button>
+            <we-button data-filter-color="oe_none">White</we-button>
+            <we-button data-filter-color="bg-primary">Primary</we-button>
+            <we-button data-filter-color="bg-secondary">Secondary</we-button>
+            <we-button data-filter-color="oe_blue">Blue</we-button>
+            <we-button data-filter-color="oe_yellow">Yellow</we-button>
+            <we-button data-filter-color="oe_red">Red</we-button>
+            <we-button data-filter-color="oe_purple">Purple</we-button>
+            <we-button data-filter-color="oe_green">Green</we-button>
+        </we-select>
+        <we-select string="Text Size" data-cover-opt-name="text_size">
+            <we-button data-select-class="o_record_cover_font_hero">Hero</we-button>
+            <we-button data-select-class="o_record_cover_font_huge">Huge</we-button>
+            <we-button data-select-class="o_record_cover_font_big">Big</we-button>
+            <we-button data-select-class="">Regular</we-button>
+            <we-button data-select-class="o_record_cover_font_small">Small</we-button>
+            <we-button data-select-class="o_record_cover_font_tiny">Tiny</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="SectionStretch"
+        data-selector="section"
+        data-target="> .container, > .container-fluid">
+        <we-checkbox string="Stretch" data-select-class="container|container-fluid" data-no-preview="true"/>
+    </div>
+</template>
+</odoo>