From a9d4603b378663a2de8b3ee9b2de0ac985b001f9 Mon Sep 17 00:00:00 2001
From: Antoine Guenet <age@odoo.com>
Date: Tue, 28 Sep 2021 14:22:28 +0000
Subject: [PATCH] [ADD] mass_mailing: temporarily restore removed templates

This commit is there to be reverted in master. It temporarily restores
templates previously removed so as not to break migrations.

- s_mail_block_banner
- s_mail_block_title_sub
- s_mail_block_paragraph
- s_mail_block_comparison_table
- s_mail_block_two_cols
- s_mail_block_three_cols
- s_mail_block_image_text
- s_mail_block_text_image
- s_mail_block_image
- s_mail_block_footer_separator
- s_mail_block_steps
- s_mail_block_discount2

task-2554899

X-original-commit: d49b1942d33a222ac9159e76f7931cb89a85016f
Part-of: odoo/odoo#77724
---
 addons/mass_mailing/views/snippets_themes.xml | 471 +++++++++++++++++-
 addons/website/views/snippets/snippets.xml    |  69 +++
 2 files changed, 539 insertions(+), 1 deletion(-)

diff --git a/addons/mass_mailing/views/snippets_themes.xml b/addons/mass_mailing/views/snippets_themes.xml
index 596d6ba4008..447ce98aec9 100644
--- a/addons/mass_mailing/views/snippets_themes.xml
+++ b/addons/mass_mailing/views/snippets_themes.xml
@@ -143,6 +143,25 @@
     </div>
 </template>
 
+<!-- TODO: remove this template -->
+<template id="s_mail_block_banner" name="Banner">
+    <div class="o_mail_block_banner">
+        <div class="o_mail_snippet_general">
+            <table align="center" cellspacing="0" cellpadding="0" border="0" class="o_mail_table_styles">
+                <tbody>
+                    <tr>
+                        <td width="100%" valign="top" class="o_mail_full_width_padding o_mail_no_colorpicker">
+                            <a href="#">
+                                <img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_banner.jpg" class="d-block mx-auto"/>
+                            </a>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</template>
+
 <template id="s_mail_block_header_logo" name="Centered Logo">
     <div class="o_mail_snippet_general o_mail_block_header_logo s_header_logo">
         <div class="container o_mail_table_styles">
@@ -182,7 +201,360 @@
         </p>
         <div class="pt16 pb16 text-center">
             <a role="button" href="#" class="btn btn-primary">LOGIN</a>
-        </div>     
+        </div>
+    </div>
+</template>
+
+<!-- TODO: remove this template -->
+<template id="s_mail_block_paragraph" name="Paragraph">
+    <div class="o_mail_block_paragraph">
+        <div class="o_mail_snippet_general">
+            <table align="center" cellspacing="0" cellpadding="0" border="0" class="o_mail_table_styles">
+                <tbody>
+                    <tr>
+                        <td width="100%" class="o_mail_h_padding o_mail_v_padding o_mail_no_colorpicker">
+                            <p> The open source model of Odoo has allowed us to leverage thousands of developers and
+                                business experts to build hundreds of apps in just a few years.</p>
+                            <p> With strong technical foundations, Odoo's framework is unique.
+                                It provides top notch usability that scales across all apps.</p>
+                            <p> Usability improvements made on Odoo will automatically apply to all
+                                of our fully integrated apps.</p>
+                            <p> That way, Odoo evolves much faster than any other solution.</p>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</template>
+
+<!-- TODO: remove this template -->
+<template id="s_mail_block_title_sub" name="Title - Subtitle">
+    <div class="o_mail_block_title_sub">
+        <div class="o_mail_snippet_general">
+            <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles">
+                <tbody>
+                    <tr>
+                        <td class="o_mail_h_padding o_mail_v_padding o_mail_no_colorpicker">
+                            <h2 class="o_mail_no_margin">Check this out!</h2>
+                            <p class="o_mail_no_margin">Apps That Help You Grow Your Business!</p>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</template>
+
+<!-- TODO: remove this template -->
+<template id="s_mail_block_comparison_table" name="Comparison">
+    <div class="o_mail_block_comparison_table">
+        <div class="o_mail_snippet_general">
+            <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles">
+                <tbody>
+                    <tr>
+                        <td class="o_mail_h_padding o_mail_v_padding o_mail_col_mv">
+                            <table cellspacing="0" cellpadding="0" class="o_mail_table_styles">
+                                <thead>
+                                    <tr>
+                                        <th class="bg-o-color-2 o_mail_v_padding o_mail_col_mv">
+                                            <h2 class="text-center o_mail_no_margin">DEFAULT</h2>
+                                        </th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr>
+                                        <td class="text-center o_mail_col_mv bg-gray-lighter">
+                                            <p class="o_mail_display_coupon text-center" style="margin-top:10px;">$8</p>
+                                            <small>user / month (billed annually)</small>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td valign="top" class="o_mail_v_padding o_mail_col_mv bg-gray-lighter">
+                                            <div class="separator"></div>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td class="o_mail_col_mv bg-gray-lighter">
+                                            <p>Basic features</p>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td class="o_mail_col_mv bg-gray-lighter">
+                                            <p>Basic management</p>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td class="o_mail_col_mv bg-gray-lighter">
+                                            <p>No customization</p>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td class="o_mail_col_mv bg-gray-lighter">
+                                            <p>No support</p>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                                <tfoot>
+                                    <tr>
+                                        <td valign="top" class="o_mail_v_padding o_mail_col_mv bg-gray-lighter">
+                                            <div class="separator"></div>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td valign="top" class="text-center o_mail_h_padding o_mail_col_mv bg-gray-lighter" style="padding-bottom: 20px;">
+                                            <a role="button" href="#" class="btn btn-block btn-primary">More</a>
+                                        </td>
+                                    </tr>
+                                </tfoot>
+                            </table>
+                        </td>
+                        <td class="o_mail_h_padding o_mail_v_padding o_mail_col_mv">
+                            <table cellspacing="0" cellpadding="0" class="o_mail_table_styles">
+                                <thead>
+                                    <tr>
+                                        <th class="bg-o-color-2 o_mail_v_padding o_mail_col_mv">
+                                            <h2 class="text-center o_mail_no_margin">PRO</h2>
+                                        </th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr>
+                                        <td class="text-center o_mail_col_mv bg-gray-lighter">
+                                            <p class="o_mail_display_coupon text-center" style="margin-top:10px;">$18</p>
+                                            <small>user / month (billed annually)</small>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td valign="top" class="o_mail_v_padding o_mail_col_mv bg-gray-lighter">
+                                            <div class="separator"></div>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td class="o_mail_col_mv bg-gray-lighter">
+                                            <p><strong>Advanced</strong> features</p>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td class="o_mail_col_mv bg-gray-lighter">
+                                            <p><strong>Total</strong> management</p>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td class="o_mail_col_mv bg-gray-lighter">
+                                            <p><strong>Fully customizable</strong></p>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td class="o_mail_col_mv bg-gray-lighter">
+                                            <p><strong>24/7 Support</strong></p>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                                <tfoot>
+                                    <tr>
+                                        <td valign="top" class="o_mail_v_padding o_mail_col_mv bg-gray-lighter">
+                                            <div class="separator"></div>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td valign="top" class="text-center o_mail_h_padding o_mail_col_mv bg-gray-lighter" style="padding-bottom: 20px;">
+                                            <a role="button" href="#" class="btn btn-block btn-primary">More</a>
+                                        </td>
+                                    </tr>
+                                </tfoot>
+                            </table>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</template>
+
+<!-- TODO: remove this template -->
+<template id="s_mail_block_two_cols" name="Two Columns">
+    <div class="o_mail_block_two_cols">
+        <div class="o_mail_snippet_general">
+            <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles o_mail_v_padding o_mail_col_table">
+                <tbody>
+                    <tr>
+                        <td style="vertical-align:top;width:270px;" class="o_mail_col_mv o_mail_col_container">
+                            <div>
+                                <img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_two_cols_1.jpg" class="d-block mx-auto"/>
+                                <h4 class="text-center">Column title</h4>
+                                <p class="text-center o_mail_no_margin">
+                                    Write one paragraph describing your product,
+                                    services or a specific feature. To be successful
+                                    your content needs to be useful to your readers.
+                                </p>
+                                <div class="text-center" style="margin-top:15px;">
+                                    <a role="button" href="#" class="btn btn-link">Read More...</a>
+                                </div>
+                            </div>
+                        </td>
+
+                        <td style="vertical-align:top;width:270px;" class="o_mail_col_mv o_mail_col_container">
+                            <div>
+                                <img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_two_cols_2.jpg" class="d-block mx-auto"/>
+                                <h4 class="text-center">Column title</h4>
+                                <p class="text-center o_mail_no_margin">
+                                    Write one paragraph describing your product,
+                                    services or a specific feature. To be successful
+                                    your content needs to be useful to your readers.
+                                </p>
+                                <div class="text-center" style="margin-top:15px;">
+                                    <a role="button" href="#" class="btn btn-link">Read More...</a>
+                                </div>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</template>
+
+<!-- TODO: remove this template -->
+<template id="s_mail_block_three_cols" name="Three Columns">
+    <div class="o_mail_block_three_cols">
+        <div class="o_mail_snippet_general">
+            <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles o_mail_v_padding o_mail_col_table">
+                <tbody>
+                    <tr>
+                        <td style="vertical-align:top;width:180px;" class="o_mail_col_mv o_mail_col_container">
+                            <div>
+                                <img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_three_cols_1.jpg" class="d-block mx-auto"/>
+                                <h4 class="text-center">Column Title</h4>
+                                <p class="text-center o_mail_no_margin">
+                                    A short description
+                                </p>
+                                <div class="text-center" style="margin-top:15px;">
+                                    <a role="button" href="#" class="btn btn-link">Read More...</a>
+                                </div>
+                            </div>
+                        </td>
+
+                        <td style="vertical-align:top;width:180px;" class="o_mail_col_mv o_mail_col_container">
+                            <div>
+                                <img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_three_cols_2.jpg" class="d-block mx-auto"/>
+                                <h4 class="text-center">Column Title</h4>
+                                <p class="text-center o_mail_no_margin">
+                                    A short description
+                                </p>
+                                <div class="text-center" style="margin-top:15px;">
+                                    <a role="button" href="#" class="btn btn-link">Read More...</a>
+                                </div>
+                            </div>
+                        </td>
+
+                        <td style="vertical-align:top;width:180px;" class="o_mail_col_mv o_mail_col_container">
+                            <div>
+                                <img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_three_cols_3.jpg" class="d-block mx-auto"/>
+                                <h4 class="text-center">Column Title</h4>
+                                <p class="text-center o_mail_no_margin">
+                                    A short description
+                                </p>
+                                <div class="text-center" style="margin-top:15px;">
+                                    <a role="button" href="#" class="btn btn-link">Read More...</a>
+                                </div>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</template>
+
+<!-- TODO: remove this template -->
+<template id="s_mail_block_image_text" name="Image - Text">
+    <div class="o_mail_block_image_text">
+        <div class="o_mail_snippet_general">
+            <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles">
+                <tbody>
+                    <tr>
+                        <td style="width:270px;text-align:center;vertical-align:middle" class="o_mail_col_mv o_mail_img_container o_mail_h_padding o_mail_v_padding">
+                            <img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_image_text.jpg" class="d-block mx-auto"/>
+                        </td>
+                        <td style="width:270px;vertical-align:middle;text-align:center;" class="o_mail_col_mv o_mail_h_padding o_mail_v_padding">
+                            <h3>Omnichannel sales</h3>
+                            <p class="o_mail_no_margin" style="text-align:justify;">Get your inside sales (CRM) fully integrated with online sales (eCommerce), in-store sales (Point of Sale) and marketplaces like eBay and Amazon.</p>
+                            <div class="text-center" style="margin-top:15px;">
+                                <a role="button" href="#" class="btn btn-link">Read More...</a>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</template>
+
+<!-- TODO: remove this template -->
+<template id="s_mail_block_text_image" name="Text - Image">
+    <div class="o_mail_block_text_image">
+        <div class="o_mail_snippet_general">
+            <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles">
+                <tbody>
+                    <tr>
+                        <td style="width:270px;vertical-align:middle;text-align:center;" class="o_mail_col_mv o_mail_h_padding o_mail_v_padding">
+                            <h3>A unique value</h3>
+                            <p class="o_mail_no_margin" style="text-align:justify;">The open source model of Odoo has allowed us to leverage thousands of developers and business experts to build hundreds of apps in just a few years.</p>
+                            <div class="text-center" style="margin-top:15px;">
+                                <a role="button" href="#" class="btn btn-link">Read More...</a>
+                            </div>
+                        </td>
+                        <td style="width:270px;text-align:center;vertical-align:middle" class="o_mail_col_mv o_mail_img_container o_mail_h_padding o_mail_v_padding">
+                            <img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_text_image.jpg" class="d-block mx-auto"/>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</template>
+
+<!-- TODO: remove this template -->
+<template id="s_mail_block_image" name="Image">
+    <div class="o_mail_block_image">
+        <div class="o_mail_snippet_general">
+            <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles">
+                <tbody>
+                    <tr>
+                        <td width="100%" align="center" style="text-align:center" class="o_mail_h_padding">
+                            <img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_image.jpg" class="d-block mx-auto"/>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td width="100%" align="center" style="text-align:center" class="o_mail_h_padding">
+                            <table>
+                                <td class="bg-o-color-2 o_mail_v_padding">
+                                    <p class="text-center">With strong technical foundations, Odoo's framework is unique. It provides <strong>top notch usability that scales across all apps</strong>.</p>
+                                </td>
+                            </table>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</template>
+
+<!-- TODO: remove this template -->
+<template id="s_mail_block_footer_separator" name="Separator">
+    <div class="o_mail_block_footer_separator">
+        <div class="o_mail_snippet_general">
+            <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles o_mail_full_width_padding">
+                <tbody>
+                    <tr>
+                        <td valign="top" style="width:100%;" class="o_mail_v_padding o_mail_no_colorpicker">
+                            <div style="width:100%;" class="separator"></div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
     </div>
 </template>
 
@@ -196,6 +568,44 @@
     </div>
 </template>
 
+<!-- TODO: remove this template -->
+<template id="s_mail_block_discount2" name="Promo Code">
+    <div class="o_mail_block_discount2 mb32">
+        <div class="o_mail_snippet_general">
+            <div class="container o_mail_table_styles o_mail_h_padding">
+                <div class="row">
+                    <div class="col o_mail_v_padding">
+                        <div class="text-center d-block mx-auto">
+                            <p class="o_mail_display_coupon o_mail_no_margin text-center text-o-color-2" style="font-weight:800;">
+                                $20
+                            </p>
+                            <h3 class="o_mail_no_margin">OFF YOUR NEXT ORDER!</h3>
+                        </div>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col text-center">
+                        <p class="text-center" style="margin-top:10px;">
+                            Use This Promo Code BEFORE 1st of August
+                        </p>
+                        <p class="o_mail_h_padding text-center">
+                            <span style="line-height: 30px;"><small>CODE: </small></span><strong class="o_code h3 oe_unremovable">45A9E77DGW8455</strong>
+                        </p>
+                        <p class="text-center">
+                            and save $20 on your next order!
+                        </p>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col mb16 mt16 text-center">
+                        <a role="button" href="#" class="btn btn-primary">Use now</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
 <template id="s_mail_block_discount1" name="Discount Offer">
     <div class="o_mail_snippet_general o_mail_block_discount1 s_discount1">
         <div class="container o_mail_table_styles">
@@ -238,6 +648,65 @@
     </div>
 </template>
 
+<!-- TODO: remove this template -->
+<template id="s_mail_block_steps" name="Steps">
+    <div class="o_mail_block_steps o_mail_no_colorpicker">
+        <div class="o_mail_snippet_general">
+            <table align="center" cellspacing="0" cellpadding="0" class="o_mail_table_styles o_mail_full_width_padding">
+                <tbody>
+                    <tr>
+                        <td class="o_mail_col_mv o_mail_h_padding o_mail_v_padding">
+                            <table align="center">
+                                <tr>
+                                    <td rowspan="2" class="text-right">
+                                        &amp;nbsp;
+                                        <span class="fa fa-compass fa-2x text-o-color-4" role="img" aria-label="Choose" title="Choose"></span>
+                                        &amp;nbsp;
+                                    </td>
+                                    <td style="padding-left:10px;">
+                                        <p class="o_mail_no_margin"><small>Step 1:</small></p>
+                                        <h4 class="o_mail_no_margin">Choose</h4>
+                                    </td>
+                                </tr>
+                            </table>
+                        </td>
+                        <td class="o_mail_col_mv o_mail_h_padding o_mail_v_padding">
+                            <table align="center">
+                                <tr>
+                                    <td rowspan="2" class="text-right">
+                                        &amp;nbsp;
+                                        <span class="fa fa-credit-card fa-2x text-o-color-4" role="img" aria-label="Order" title="Order"></span>
+                                        &amp;nbsp;
+                                    </td>
+                                    <td style="padding-left:10px;">
+                                        <p class="o_mail_no_margin"><small>Step 2:</small></p>
+                                        <h4 class="o_mail_no_margin ">Order</h4>
+                                    </td>
+                                </tr>
+                            </table>
+                        </td>
+                        <td class="o_mail_col_mv o_mail_h_padding o_mail_v_padding">
+                            <table align="center">
+                                <tr>
+                                    <td rowspan="2" class="text-right">
+                                        &amp;nbsp;
+                                        <span class="fa fa-smile-o fa-2x text-o-color-4" role="img" aria-label="Enjoy" title="Enjoy"></span>
+                                        &amp;nbsp;
+                                    </td>
+                                    <td style="padding-left:10px;">
+                                        <p class="o_mail_no_margin"><small>Step 3:</small></p>
+                                        <h4 class="o_mail_no_margin ">Enjoy!</h4>
+                                    </td>
+                                </tr>
+                            </table>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</template>
+
 <template id="s_mail_block_footer_social" name="Footer Center">
     <div class="s_footer_social o_mail_block_footer_social o_mail_footer_social_center o_mail_snippet_general">
         <div class="container o_mail_table_styles">
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index bb51e2e0880..fb9fc2f349a 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -241,6 +241,75 @@
     </xpath>
 </template>
 
+<!-- TODO: remove this 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'"
+                  t-att-data-variable="width_variable"/>
+        <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"
+                   t-att-data-variable="style_variable">
+            <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-"
+                        t-att-data-color="color_variable"/>
+    </we-row>
+</template>
+
+<!-- TODO: remove this 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"
+              t-att-data-variable="radius_variable"/>
+</template>
+
+<!-- TODO: remove this template -->
+<template id="snippet_options_shadow_widgets">
+    <we-button-group string="Shadow" data-shadow-class="shadow" t-att-data-variable="shadow_variable">
+        <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" t-att-data-variable="shadow_variable">
+        <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_conditional_visibility">
     <we-select t-att-string="option_name" t-att-data-attribute-name="attribute_rule" data-no-preview="true" data-dependencies="visibility_conditional" data-is-visibility-condition="true">
         <we-button data-select-data-attribute="">Visible for</we-button>