<?xml version="1.0"?>
<t t-name="web_editor.snippet_options_background_options">
    <div t-att-data-js="with_colors and with_color_combinations and 'ColoredLevelBackground' or 'BackgroundToggler'" t-att-data-selector="selector" t-att-data-exclude="exclude" t-att-data-target="target">
        <we-row t-if="with_colors or with_images" string="Background" class="o_we_full_row">
            <t t-if="with_colors" t-call="web_editor.snippet_options_background_color_widget"/>
            <t t-if="with_images">
                <we-button title="Image" class="ms-auto fa fa-fw fa-camera" data-name="bg_image_toggle_opt" t-att-data-dependencies="images_dependencies" data-toggle-bg-image="true" data-no-preview="true">
                </we-button>
                <t t-if="with_shapes">
                    <we-button title="Shape" data-toggle-bg-shape="true" t-att-data-dependencies="images_dependencies" data-no-preview="true" data-img="/web_editor/static/src/img/snippets_options/bg_shape.svg"/>
                </t>
            </t>
        </we-row>
    </div>
    <t t-if="with_images">
        <div data-js="BackgroundImage" t-att-data-selector="selector" t-att-data-exclude="exclude" t-att-data-target="target">
            <we-row string="Image" class="o_we_sublevel_1">
                <we-imagepicker title="Edit image" data-background="" data-name="bg_image_opt" data-dependencies="bg_image_opt"/>
            </we-row>
            <we-row string="Main Color" class="o_we_sublevel_2" title="Main Color" data-name="main_color_opt">
                <we-colorpicker data-dynamic-color="true" data-color-name="c1"/>
                <we-colorpicker data-dynamic-color="true" data-color-name="c2"/>
                <we-colorpicker data-dynamic-color="true" data-color-name="c3"/>
                <we-colorpicker data-dynamic-color="true" data-color-name="c4"/>
                <we-colorpicker data-dynamic-color="true" data-color-name="c5"/>
            </we-row>
        </div>

        <div data-js="BackgroundPosition" t-att-data-selector="selector" t-att-data-exclude="exclude" t-att-data-target="target">
            <we-row string="Position" class="o_we_sublevel_2">
                <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-crosshairs" 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" class="o_we_sublevel_3" data-select-style="auto" placeholder="auto" data-unit="px"/>
                <we-input string="Height" class="o_we_sublevel_3" data-select-style="auto" placeholder="auto" data-unit="px"/>
            </we-multi>
        </div>

        <div data-js="BackgroundOptimize" t-att-data-selector="selector" t-att-data-exclude="exclude" t-att-data-target="target">
            <t t-call="web_editor.snippet_options_image_optimization_widgets">
                <t t-set="indent" t-value="True"/>
            </t>
        </div>

        <!-- Color filter -->
        <div t-att-data-js="with_colors and with_color_combinations and 'ColoredLevelBackground' or 'BackgroundToggler'" t-att-data-selector="selector" t-att-data-exclude="exclude" t-att-data-target="target">
            <t t-set="color_filter_dependencies" t-valuef="bg_image_toggle_opt"/>
            <we-colorpicker string="Color Filter" class="o_we_sublevel_2" t-att-data-dependencies="color_filter_dependencies" data-name="bg_filter_opt" data-select-filter-color="" data-color-prefix="bg-" data-opacity="0.5" data-with-gradients="1" data-selected-tab="gradients" data-excluded="theme, common"/>
        </div>

        <div data-js="BackgroundShape" t-att-data-selector="selector" t-att-data-exclude="exclude" t-att-data-target="target">
            <we-row string="Shape" class="o_we_sublevel_1">
                <we-select-pager class="o_we_bg_shape_menu" data-dependencies="!shape_none_opt" data-name="bg_shape_opt">
                    <header class="o_pager_nav d-flex flex-column flex-wrap flex-shrink-0 mh-100">
                        <div class="d-flex align-items-center">
                            <button class="o_pager_nav_angle fa fa-angle-left btn btn-secondary bg-transparent border-0"/>
                            <h5 class="o_pager_nav_title mb-0 text-white">Background Shapes</h5>
                        </div>
                        <div class="d-flex">
                            <button type="button" class="o_pager_nav_btn p-0 text-uppercase active" data-scroll-to="o_scroll_bgshapes_basic">
                                <span class="w-100">Basic</span>
                            </button>
                            <button type="button" class="o_pager_nav_btn p-0 text-uppercase" data-scroll-to="o_scroll_bgshapes_linear">
                                <span class="w-100">Linear</span>
                            </button>
                            <button type="button" class="o_pager_nav_btn p-0 text-uppercase" data-scroll-to="o_scroll_bgshapes_creative">
                                <span class="w-100">Creative</span>
                            </button>
                        </div>
                    </header>
                    <div class="o_pager_container">
                        <div class="o_scroll_bgshapes_basic">
                        <we-title>Connections</we-title>
                            <we-select-page string="Connections">
                                <we-button data-shape="web_editor/Connections/01" data-select-label="Connections 01"/>
                                <we-button data-shape="web_editor/Connections/02" data-select-label="Connections 02"/>
                                <we-button data-shape="web_editor/Connections/03" data-select-label="Connections 03"/>
                                <we-button data-shape="web_editor/Connections/04" data-select-label="Connections 04"/>
                                <we-button data-shape="web_editor/Connections/05" data-select-label="Connections 05"/>
                                <we-button data-shape="web_editor/Connections/06" data-select-label="Connections 06"/>
                                <we-button data-shape="web_editor/Connections/07" data-select-label="Connections 07"/>
                                <we-button data-shape="web_editor/Connections/08" data-select-label="Connections 08"/>
                                <we-button data-shape="web_editor/Connections/09" data-select-label="Connections 09"/>
                                <we-button data-shape="web_editor/Connections/10" data-select-label="Connections 10"/>
                                <we-button data-shape="web_editor/Connections/11" data-select-label="Connections 11"/>
                                <we-button data-shape="web_editor/Connections/12" data-select-label="Connections 12"/>
                                <we-button data-shape="web_editor/Connections/13" data-select-label="Connections 13"/>
                                <we-button data-shape="web_editor/Connections/14" data-select-label="Connections 14"/>
                                <we-button data-shape="web_editor/Connections/15" data-select-label="Connections 15"/>
                                <we-button data-shape="web_editor/Connections/16" data-select-label="Connections 16"/>
                                <we-button data-shape="web_editor/Connections/17" data-select-label="Connections 17"/>
                                <we-button data-shape="web_editor/Connections/18" data-select-label="Connections 18"/>
                                <we-button data-shape="web_editor/Connections/19" data-select-label="Connections 19"/>
                                <we-button data-shape="web_editor/Connections/20" data-select-label="Connections 20"/>
                            </we-select-page>
                            <we-title>Containers</we-title>
                            <we-select-page string="Containers">
                                <we-button data-shape="web_editor/Containers/01" data-select-label="Container 01"/>
                                <we-button data-shape="web_editor/Containers/02" data-select-label="Container 02"/>
                                <we-button data-shape="web_editor/Containers/03" data-select-label="Container 03"/>
                                <we-button data-shape="web_editor/Containers/04" data-select-label="Container 04"/>
                                <we-button data-shape="web_editor/Containers/05" data-select-label="Container 05" data-animated="true"/>
                                <we-button data-shape="web_editor/Containers/06" data-select-label="Container 06" data-animated="true"/>
                            </we-select-page>
                            <we-title>Bold</we-title>
                            <we-select-page string="Bold">
                                <we-button data-shape="web_editor/Bold/16" data-select-label="Bold 01"/>
                                <we-button data-shape="web_editor/Bold/21" data-select-label="Bold 02"/>
                                <we-button data-shape="web_editor/Bold/17" data-select-label="Bold 03"/>
                                <we-button data-shape="web_editor/Bold/22" data-select-label="Bold 04"/>
                                <we-button data-shape="web_editor/Bold/13" data-select-label="Bold 05"/>
                                <we-button data-shape="web_editor/Bold/14" data-select-label="Bold 06"/>
                                <we-button data-shape="web_editor/Bold/15" data-select-label="Bold 07"/>
                                <we-button data-shape="web_editor/Bold/01_001" data-select-label="Bold 08"/>
                                <we-button data-shape="web_editor/Bold/18" data-select-label="Bold 09"/>
                                <we-button data-shape="web_editor/Bold/19" data-select-label="Bold 10"/>
                                <we-button data-shape="web_editor/Bold/23" data-select-label="Bold 11"/>
                                <we-button data-shape="web_editor/Bold/20" data-select-label="Bold 12"/>
                            </we-select-page>
                            <we-title>Angular</we-title>
                            <we-select-page string="Angular">
                                <we-button data-shape="web_editor/Angular/01" data-select-label="Angular 01"/>
                                <we-button data-shape="web_editor/Angular/02" data-select-label="Angular 02"/>
                                <we-button data-shape="web_editor/Angular/03" data-select-label="Angular 03"/>
                                <we-button data-shape="web_editor/Angular/04" data-select-label="Angular 04"/>
                                <we-button data-shape="web_editor/Angular/05" data-select-label="Angular 05"/>
                                <we-button data-shape="web_editor/Angular/06" data-select-label="Angular 06"/>
                                <we-button data-shape="web_editor/Angular/07" data-select-label="Angular 07"/>
                                <we-button data-shape="web_editor/Angular/08" data-select-label="Angular 08"/>
                                <we-button data-shape="web_editor/Angular/09" data-select-label="Angular 09"/>
                                <we-button data-shape="web_editor/Floats/07" data-select-label="Angular 10" data-animated="true"/>
                            </we-select-page>
                            <we-title>Blobs</we-title>
                            <we-select-page string="Blobs">
                                <we-button data-shape="web_editor/Blobs/02" data-select-label="Blob 01"/>
                                <we-button data-shape="web_editor/Blobs/05_001" data-select-label="Blob 02"/>
                                <we-button data-shape="web_editor/Blobs/03" data-select-label="Blob 03"/>
                                <we-button data-shape="web_editor/Blobs/06_001" data-select-label="Blob 04"/>
                                <we-button data-shape="web_editor/Blobs/14" data-select-label="Blob 05"/>
                                <we-button data-shape="web_editor/Blobs/17" data-select-label="Blob 06"/>
                                <we-button data-shape="web_editor/Blobs/15" data-select-label="Blob 07"/>
                                <we-button data-shape="web_editor/Blobs/18" data-select-label="Blob 08"/>
                                <we-button data-shape="web_editor/Blobs/01_001" data-select-label="Blob 09" data-animated="true"/>
                                <we-button data-shape="web_editor/Blobs/16" data-select-label="Blob 10"/>
                                <we-button data-shape="web_editor/Blobs/04_001" data-select-label="Blob 11"/>
                                <we-button data-shape="web_editor/Blobs/10_002" data-select-label="Blob 12"/>
                                <we-button data-shape="web_editor/Blobs/13" data-select-label="Blob 13"/>
                                <we-button data-shape="web_editor/Floats/03" data-select-label="Blob 14" data-animated="true"/>
                                <we-button data-shape="web_editor/Floats/04" data-select-label="Blob 15" data-animated="true"/>
                                <we-button data-shape="web_editor/Floats/06" data-select-label="Blob 16" data-animated="true"/>
                            </we-select-page>
                        </div>
                        <div class="o_scroll_bgshapes_linear">
                            <we-title>Airy</we-title>
                            <we-select-page string="Airy">
                                <we-button data-shape="web_editor/Airy/01_001" data-select-label="Airy 01"/>
                                <we-button data-shape="web_editor/Airy/06_001" data-select-label="Airy 02"/>
                                <we-button data-shape="web_editor/Airy/02_001" data-select-label="Airy 03"/>
                                <we-button data-shape="web_editor/Airy/07_001" data-select-label="Airy 04"/>
                                <we-button data-shape="web_editor/Airy/08_001" data-select-label="Airy 05"/>
                                <we-button data-shape="web_editor/Airy/10_001" data-select-label="Airy 06"/>
                                <we-button data-shape="web_editor/Airy/09_001" data-select-label="Airy 07"/>
                                <we-button data-shape="web_editor/Airy/11_001" data-select-label="Airy 08"/>
                                <we-button data-shape="web_editor/Airy/16" data-select-label="Airy 09"/>
                                <we-button data-shape="web_editor/Airy/17" data-select-label="Airy 10"/>
                                <we-button data-shape="web_editor/Airy/12_002" data-select-label="Airy 11" data-animated="true"/>
                                <we-button data-shape="web_editor/Airy/13_002" data-select-label="Airy 12" data-animated="true"/>
                                <we-button data-shape="web_editor/Airy/14_001" data-select-label="Airy 13"/>
                                <we-button data-shape="web_editor/Airy/15" data-select-label="Airy 14" data-animated="true"/>
                            </we-select-page>
                            <we-title>Grids</we-title>
                            <we-select-page string="Grids">
                                <we-button data-shape="web_editor/Grids/01" data-select-label="Grid 01"/>
                                <we-button data-shape="web_editor/Grids/02" data-select-label="Grid 02"/>
                                <we-button data-shape="web_editor/Grids/03" data-select-label="Grid 03"/>
                                <we-button data-shape="web_editor/Grids/04" data-select-label="Grid 04"/>
                                <we-button data-shape="web_editor/Grids/05" data-select-label="Grid 05"/>
                                <we-button data-shape="web_editor/Grids/06" data-select-label="Grid 06"/>
                                <we-button data-shape="web_editor/Grids/07" data-select-label="Grid 07"/>
                                <we-button data-shape="web_editor/Grids/08" data-select-label="Grid 08"/>
                            </we-select-page>
                        </div>
                        <div class="o_scroll_bgshapes_creative">
                            <we-title>Patterns</we-title>
                            <we-select-page string="Patterns">
                                <we-button data-shape="web_editor/Patterns/01" data-select-label="Pattern 01"/>
                                <we-button data-shape="web_editor/Patterns/02" data-select-label="Pattern 02"/>
                                <we-button data-shape="web_editor/Patterns/03" data-select-label="Pattern 03"/>
                                <we-button data-shape="web_editor/Patterns/04" data-select-label="Pattern 04"/>
                                <we-button data-shape="web_editor/Patterns/05" data-select-label="Pattern 05"/>
                                <we-button data-shape="web_editor/Floats/12" data-select-label="Pattern 06" data-animated="true"/>
                            </we-select-page>
                            <we-title>Blurry</we-title>
                            <we-select-page string="Patterns">
                                <we-button data-shape="web_editor/Blurry/01" data-select-label="Blurry 01"/>
                                <we-button data-shape="web_editor/Blurry/02" data-select-label="Blurry 02"/>
                                <we-button data-shape="web_editor/Blurry/03" data-select-label="Blurry 03"/>
                                <we-button data-shape="web_editor/Blurry/04" data-select-label="Blurry 04"/>
                                <we-button data-shape="web_editor/Blurry/05" data-select-label="Blurry 05"/>
                                <we-button data-shape="web_editor/Blurry/06" data-select-label="Blurry 06"/>
                            </we-select-page>
                            <we-title>Wavy</we-title>
                            <we-select-page string="Wavy">
                                <we-button data-shape="web_editor/Wavy/03" data-select-label="Wavy 01"/>
                                <we-button data-shape="web_editor/Wavy/10" data-select-label="Wavy 02"/>
                                <we-button data-shape="web_editor/Wavy/24" data-select-label="Wavy 03" data-animated="true"/>
                                <we-button data-shape="web_editor/Wavy/26" data-select-label="Wavy 04" data-animated="true"/>
                                <we-button data-shape="web_editor/Wavy/27" data-select-label="Wavy 05" data-animated="true"/>
                                <we-button data-shape="web_editor/Wavy/04" data-select-label="Wavy 06"/>
                                <we-button data-shape="web_editor/Wavy/11_001" data-select-label="Wavy 07"/>
                                <we-button data-shape="web_editor/Wavy/18" data-select-label="Wavy 08"/>
                                <we-button data-shape="web_editor/Wavy/08_001" data-select-label="Wavy 09"/>
                                <we-button data-shape="web_editor/Wavy/09_001" data-select-label="Wavy 10"/>
                                <we-button data-shape="web_editor/Wavy/22_001" data-select-label="Wavy 11"/>
                                <we-button data-shape="web_editor/Wavy/29" data-select-label="Wavy 12"/>
                                <we-button data-shape="web_editor/Wavy/30" data-select-label="Wavy 13"/>
                                <we-button data-shape="web_editor/Wavy/31" data-select-label="Wavy 14"/>
                            </we-select-page>
                            <we-title>Block &amp; Rainy</we-title>
                            <we-select-page string="Blocks &amp; Rainy">
                                <we-button data-shape="web_editor/Blocks/02_001" data-select-label="Blocks 01"/>
                                <we-button data-shape="web_editor/Rainy/01_001" data-select-label="Rainy 01" data-animated="true"/>
                                <we-button data-shape="web_editor/Blocks/01_001" data-select-label="Blocks 02"/>
                                <we-button data-shape="web_editor/Rainy/02_001" data-select-label="Rainy 02" data-animated="true"/>
                                <we-button data-shape="web_editor/Rainy/06" data-select-label="Rainy 03"/>
                                <we-button data-shape="web_editor/Blocks/04" data-select-label="Blocks 03"/>
                                <we-button data-shape="web_editor/Rainy/07" data-select-label="Rainy 04"/>
                                <we-button data-shape="web_editor/Rainy/10" data-select-label="Rainy 05" data-animated="true"/>
                                <we-button data-shape="web_editor/Floats/10" data-select-label="Rainy 06" data-animated="true"/>
                                <we-button data-shape="web_editor/Floats/11" data-select-label="Rainy 07" data-animated="true"/>
                                <we-button data-shape="web_editor/Rainy/08_001" data-select-label="Rainy 08" data-animated="true"/>
                                <we-button data-shape="web_editor/Rainy/09_001" data-select-label="Rainy 09"/>
                            </we-select-page>
                            <we-title>Miscellaneous</we-title>
                            <we-select-page string="Miscellaneous">
                                <we-button data-shape="web_editor/Floats/01" data-select-label="Miscellaneous 01" data-animated="true"/>
                                <we-button data-shape="web_editor/Floats/02" data-select-label="Miscellaneous 02" data-animated="true"/>
                                <we-button data-shape="web_editor/Floats/05" data-select-label="Miscellaneous 03" data-animated="true"/>
                                <we-button data-shape="web_editor/Floats/08" data-select-label="Miscellaneous 04" data-animated="true"/>
                                <we-button data-shape="web_editor/Floats/09" data-select-label="Miscellaneous 05" data-animated="true"/>
                                <we-button data-shape="web_editor/Floats/13" data-select-label="Miscellaneous 06" data-animated="true"/>
                                <we-button data-shape="web_editor/Floats/14" data-select-label="Miscellaneous 07" data-animated="true"/>
                                <we-button data-shape="web_editor/Zigs/01_001" data-select-label="Miscellaneous 08" data-animated="true"/>
                            </we-select-page>
                        </div>
                    </div>
                </we-select-pager>
                <we-button class="o_we_device" data-show-on-mobile="false" title="Show/Hide on Mobile" data-dependencies="!shape_none_opt" data-no-preview="true" data-img="/website/static/src/img/snippets_options/mobile_invisible.svg"/>
                <we-button data-shape="" data-name="shape_none_opt" data-dependencies="!shape_none_opt" data-no-preview="true" class="o_we_image_shape_remove o_we_bg_danger fa fa-fw fa-times"/>
            </we-row>
            <we-row string="Flip" class="o_we_sublevel_2">
                <we-button class="oi oi-fw oi-arrows-h" data-flip-x="true" data-no-preview="true" data-dependencies="!shape_none_opt"/>
                <we-button class="oi oi-fw oi-arrows-v" data-flip-y="true" data-no-preview="true" data-dependencies="!shape_none_opt"/>
            </we-row>
            <we-row string="Colors" class="o_we_sublevel_2" data-name="colors">
                <we-colorpicker data-select-style="" data-css-property="background-color" data-color-prefix="bg-" data-apply-to="&gt; .o_we_shape"/>
            </we-row>
            <we-row string="Speed" class="o_we_sublevel_2">
                <we-range data-name="bg_shape_anim_speed_opt" data-no-preview="true" data-display-range-value="true" data-set-bg-shape-animation-speed="" data-max="2" data-min="-2" data-step="0.1" data-to-ratio="true"/>
            </we-row>
        </div>
    </t>
</t>

