<?xml version="1.0"?>
<t t-name="web_editor.snippet_options">
    <!-- t-field -->
    <div data-js="many2one" data-selector="[data-oe-many2one-model]:not([data-oe-readonly])" data-no-check="true"/>

    <div data-selector=".s_hr" data-drop-near="p, h1, h2, h3, blockquote, .s_hr"/>

    <t t-call="web_editor.snippet_options_version_control">
        <t t-set="selector" t-value="'[data-snippet]'"/>
    </t>

    <!-- Replace a media -->
    <!-- TODO probably review this system once the new editor is merged to not duplicate the selector, etc -->
    <div data-js="ReplaceMedia" data-selector="img, .media_iframe_video, span.fa, i.fa" data-exclude="[data-oe-xpath], a[href^='/website/social/'] &gt; i.fa, a[class*='s_share_'] &gt; i.fa">
        <we-row string="Media">
            <we-button class="o_we_bg_success" data-replace-media="true" data-no-preview="true">Replace</we-button>
            <div>
                <we-button class="fa fa-link" data-name="media_link_opt" data-set-link="true" data-no-preview="true" title="Redirect the user elsewhere when he clicks on the media."/>
            </div>
        </we-row>
        <we-input string="Your URL" class="o_we_sublevel_1 o_we_large" data-name="media_url_opt" data-dependencies="media_link_opt" data-set-url="" data-no-preview="true" placeholder="www.example.com" data-request-focus="true"/>
        <we-checkbox string="Open in New Window" class="o_we_sublevel_1" data-dependencies="media_url_opt" data-set-new-window="true" data-no-preview="true"/>
    </div>

    <div data-js="FontawesomeTools" data-selector="span.fa, i.fa" data-exclude="[data-oe-xpath]">
        <we-colorpicker string="Color" title="Color" data-select-style="" data-css-property="color" data-color-prefix="text-"/>

        <we-colorpicker string="Background Color" title="Background Color" data-select-style="" data-css-property="background-color" data-color-prefix="bg-"/>

        <we-button-group string="Size">
            <we-button data-select-class="" title="Size 1x">1x</we-button>
            <we-button data-select-class="fa-2x" title="Size 2x">2x</we-button>
            <we-button data-select-class="fa-3x" title="Size 3x">3x</we-button>
            <we-button data-select-class="fa-4x" title="Size 4x">4x</we-button>
            <we-button data-select-class="fa-5x" title="Size 5x">5x</we-button>

            <!-- Hidden buttons which allows to automatically remove other fa
                 sizing class we do not suggest.
                 TODO: implement a param to add those extra classes to remove
                 via selectClass (also fixes the fact that nothing is selected
                 if fa-1x is actually used on the icon in this case) -->
            <we-button data-select-class="fa-1x" data-dependencies="fake"/>
            <we-button data-select-class="fa-lg" data-dependencies="fake"/>
        </we-button-group>
    </div>

    <t t-set="no_animations" t-value="False"/>
    <div data-js="ImageTools" data-selector="img">
        <div class="o_we_image_shape">
            <we-row string="Shape" class="o_we_full_row">
                <we-select-pager data-name="shape_img_opt" class="o_we_fake_transparent_background">
                    <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">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_shapes_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_shapes_decorative">
                                <span class="w-100">Decorative</span>
                            </button>
                            <button type="button" class="o_pager_nav_btn p-0 text-uppercase" data-scroll-to="o_scroll_shapes_devices">
                                <span class="w-100">Devices</span>
                            </button>
                        </div>
                    </header>
                    <div class="o_pager_container">
                        <div class="o_scroll_shapes_basic">
                            <we-title class="">Geometrics</we-title>
                            <we-select-page string="Geometrics">
                                <we-button data-set-img-shape="web_editor/geometric/geo_square" data-no-transform="true" data-name="shape_img_square_opt"/> <!-- hidden and only used for hover effects -->
                                <we-button data-set-img-shape="web_editor/geometric/geo_shuriken" data-select-label="Shuriken" data-no-transform="true" data-unstretch="true"/>
                                <we-button data-set-img-shape="web_editor/geometric/geo_diamond" data-select-label="Diamond" data-no-transform="true" data-unstretch="true"/>
                                <we-button data-set-img-shape="web_editor/geometric/geo_triangle" data-select-label="Triangle" data-unstretch="true"/>
                                <we-button data-set-img-shape="web_editor/geometric/geo_cornered_triangle" data-select-label="Corner Triangle" data-unstretch="true"/>
                                <we-button data-set-img-shape="web_editor/geometric/geo_pentagon" data-select-label="Pentagon" data-unstretch="true"/>
                                <we-button data-set-img-shape="web_editor/geometric/geo_hexagon" data-select-label="Hexagon" data-unstretch="true"/>
                                <we-button data-set-img-shape="web_editor/geometric/geo_heptagon" data-select-label="Heptagon" data-unstretch="true"/>
                                <we-button data-set-img-shape="web_editor/geometric/geo_star" data-select-label="Star 1" data-unstretch="true"/>
                                <we-button data-set-img-shape="web_editor/geometric/geo_star_8pin" data-select-label="Star 2" data-no-transform="true" data-unstretch="true"/>
                                <we-button data-set-img-shape="web_editor/geometric/geo_star_16pin" data-select-label="Star 3" data-no-transform="true" data-unstretch="true"/>
                                <we-button data-set-img-shape="web_editor/geometric/geo_slanted" data-select-label="Slanted" data-unstretch="true"/>
                                <we-button data-set-img-shape="web_editor/geometric/geo_emerald" data-select-label="Emerald" data-unstretch="true"/>
                                <we-button data-set-img-shape="web_editor/geometric/geo_tetris" data-select-label="Tetris" data-unstretch="true"/>
                                <we-button data-set-img-shape="web_editor/geometric/geo_kayak" data-select-label="Kayak" data-unstretch="true"/>
                                <we-button data-set-img-shape="web_editor/geometric/geo_tear" data-select-label="Tear" data-unstretch="true"/>
                                <we-button data-set-img-shape="web_editor/geometric/geo_gem" data-select-label="Gem" data-unstretch="true"/>
                                <we-button data-set-img-shape="web_editor/geometric/geo_sonar" data-select-label="Sonar" data-unstretch="true"/>
                                <we-button data-set-img-shape="web_editor/geometric/geo_door" data-select-label="Door" data-unstretch="true"/>
                                <t t-if="not no_animations">
                                    <we-button data-set-img-shape="web_editor/geometric/geo_square_1" data-select-label="Square 1" data-animated="true"/>
                                    <we-button data-set-img-shape="web_editor/geometric/geo_square_2" data-select-label="Square 2" data-animated="true"/>
                                    <we-button data-set-img-shape="web_editor/geometric/geo_square_3" data-select-label="Square 3" data-animated="true"/>
                                    <we-button data-set-img-shape="web_editor/geometric/geo_square_4" data-select-label="Square 4" data-animated="true"/>
                                    <we-button data-set-img-shape="web_editor/geometric/geo_square_5" data-select-label="Square 5" data-animated="true"/>
                                    <we-button data-set-img-shape="web_editor/geometric/geo_square_6" data-select-label="Square 6" data-animated="true"/>
                                </t>
                            </we-select-page>

                            <we-title>Geometrics Rounded</we-title>
                            <we-select-page string="Geometrics Rounded">
                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_circle" data-select-label="Circle" data-no-transform="true" data-unstretch="true"/>
                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_square" data-select-label="Square (R)" data-no-transform="true" data-unstretch="true"/>
                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_diamond" data-select-label="Diamond (R)" data-no-transform="true" data-unstretch="true"/>
                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_shuriken" data-select-label="Shuriken (R)" data-no-transform="true" data-unstretch="true"/>
                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_triangle" data-select-label="Triangle (R)" data-unstretch="true"/>
                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_pentagon" data-select-label="Pentagon (R)" data-unstretch="true"/>
                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_hexagon" data-select-label="Hexagon (R)" data-unstretch="true"/>
                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_heptagon" data-select-label="Heptagon (R)" data-unstretch="true"/>
                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_star" data-select-label="Star 1 (R)" data-unstretch="true"/>
                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_star_7pin" data-select-label="Star 2 (R)" data-unstretch="true"/>
                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_star_8pin" data-select-label="Star 3 (R)" data-no-transform="true" data-unstretch="true"/>
                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_star_16pin" data-select-label="Star 4 (R)" data-no-transform="true" data-unstretch="true"/>
                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_emerald" data-select-label="Emerald (R)" data-unstretch="true"/>
                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_lemon" data-select-label="Lemon (R)" data-unstretch="true"/>
                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_tear" data-select-label="Tear (R)" data-unstretch="true"/>
                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_pill" data-select-label="Pill (R)" data-unstretch="true"/>
                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_gem" data-select-label="Gem (R)" data-unstretch="true"/>
                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_cornered" data-select-label="Cornered" data-unstretch="true"/>
                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_door" data-select-label="Door (R)" data-unstretch="true"/>
                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_sonar" data-select-label="Sonar (R)" data-unstretch="true"/>
                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_clover" data-select-label="Clover (R)" data-no-transform="true" data-unstretch="true"/>
                                <we-button data-set-img-shape="web_editor/geometric_round/geo_round_bread" data-select-label="Bread (R)" data-no-transform="true" data-unstretch="true"/>
                                <t t-if="not no_animations">
                                    <we-button data-set-img-shape="web_editor/geometric_round/geo_round_square_1" data-select-label="Square 1 (R)" data-animated="true"/>
                                    <we-button data-set-img-shape="web_editor/geometric_round/geo_round_square_2" data-select-label="Square 2 (R)" data-animated="true"/>
                                    <we-button data-set-img-shape="web_editor/geometric_round/geo_round_blob_soft" data-select-label="Blob Soft" data-animated="true"/>
                                    <we-button data-set-img-shape="web_editor/geometric_round/geo_round_blob_medium" data-select-label="Blob Medium" data-animated="true"/>
                                    <we-button data-set-img-shape="web_editor/geometric_round/geo_round_blob_hard" data-select-label="Blob Hard" data-animated="true"/>
                                </t>
                            </we-select-page>

                            <we-title>Geometrics Panels</we-title>
                            <we-select-page string="Panels">
                                <we-button data-set-img-shape="web_editor/panel/panel_duo" data-select-label="Duo"/>
                                <we-button data-set-img-shape="web_editor/panel/panel_duo_r" data-select-label="Duo (R)"/>
                                <we-button data-set-img-shape="web_editor/panel/panel_duo_step" data-select-label="Duo Step"/>
                                <we-button data-set-img-shape="web_editor/panel/panel_duo_step_pill" data-select-label="Duo Step Pill"/>
                                <we-button data-set-img-shape="web_editor/panel/panel_trio_in_r" data-select-label="Trio In (R)"/>
                                <we-button data-set-img-shape="web_editor/panel/panel_trio_out_r" data-select-label="Trio Out (R)"/>
                                <we-button data-set-img-shape="web_editor/panel/panel_window" data-select-label="Window" data-no-transform="true" data-unstretch="true"/>
                            </we-select-page>

                            <we-title>Composites</we-title>
                            <we-select-page string="Composites">
                                <we-button data-set-img-shape="web_editor/composite/composite_double_pill" data-select-label="Double Pill"/>
                                <we-button data-set-img-shape="web_editor/composite/composite_triple_pill" data-select-label="Triple Pill"/>
                                <we-button data-set-img-shape="web_editor/composite/composite_half_circle" data-select-label="Half Circle"/>
                                <we-button data-set-img-shape="web_editor/composite/composite_sonar" data-select-label="Double Sonar"/>
                                <we-button data-set-img-shape="web_editor/composite/composite_cut_circle" data-select-label="Cut Circle"/>
                            </we-select-page>
                        </div>
                        <div class="o_scroll_shapes_decorative">
                            <we-title>Brushed</we-title>
                            <we-select-page string="Brushed">
                                <we-button data-set-img-shape="web_editor/brushed/brush_1" data-select-label="Brush 1" data-unstretch="true"/>
                                <we-button data-set-img-shape="web_editor/brushed/brush_2" data-select-label="Brush 2" data-unstretch="true"/>
                                <we-button data-set-img-shape="web_editor/brushed/brush_3" data-select-label="Brush 3" data-unstretch="true"/>
                                <we-button data-set-img-shape="web_editor/brushed/brush_4" data-select-label="Brush 4"/>
                            </we-select-page>

                            <we-title>Composition</we-title>
                            <we-select-page string="Composition">
                                <we-button data-set-img-shape="web_editor/composition/composition_organic_line" data-select-label="Organic Line" data-no-transform="true"/>
                                <we-button data-set-img-shape="web_editor/composition/composition_oval_line" data-select-label="Oval Line" data-no-transform="true"/>
                                <t t-if="not no_animations">
                                    <we-button data-set-img-shape="web_editor/composition/composition_triangle_line" data-select-label="Triangle Line" data-animated="true" data-no-transform="true"/>
                                    <we-button data-set-img-shape="web_editor/composition/composition_line_1" data-select-label="Line 1" data-animated="true" data-no-transform="true"/>
                                    <we-button data-set-img-shape="web_editor/composition/composition_line_3" data-select-label="Line 2" data-animated="true" data-no-transform="true"/>
                                    <we-button data-set-img-shape="web_editor/composition/composition_line_2" data-select-label="Line 2" data-animated="true" data-no-transform="true"/>
                                    <we-button data-set-img-shape="web_editor/composition/composition_mixed_1" data-select-label="Mixed 1" data-animated="true" data-no-transform="true"/>
                                    <we-button data-set-img-shape="web_editor/composition/composition_mixed_2" data-select-label="Mixed 2" data-animated="true" data-no-transform="true"/>
                                    <we-button data-set-img-shape="web_editor/composition/composition_planet_1" data-select-label="Planet 1" data-animated="true" data-no-transform="true"/>
                                    <we-button data-set-img-shape="web_editor/composition/composition_planet_2" data-select-label="Planet 2" data-animated="true" data-no-transform="true"/>
                                    <we-button data-set-img-shape="web_editor/composition/composition_square_1" data-select-label="Square Dot 1" data-animated="true" data-no-transform="true"/>
                                    <we-button data-set-img-shape="web_editor/composition/composition_square_2" data-select-label="Square Dot 2" data-animated="true" data-no-transform="true"/>
                                    <we-button data-set-img-shape="web_editor/composition/composition_square_3" data-select-label="Square Dot 3" data-animated="true" data-no-transform="true"/>
                                    <we-button data-set-img-shape="web_editor/composition/composition_square_4" data-select-label="Square Dot 4" data-animated="true" data-no-transform="true"/>
                                    <we-button data-set-img-shape="web_editor/composition/composition_square_line" data-select-label="Square Line" data-animated="true" data-no-transform="true"/>
                                </t>
                            </we-select-page>

                            <we-title>Patterns</we-title>
                            <we-select-page string="Patterns">
                                <we-button data-set-img-shape="web_editor/pattern/pattern_organic_cross" data-select-label="Organic Cross" data-no-transform="true"/>
                                <we-button data-set-img-shape="web_editor/pattern/pattern_organic_caps" data-select-label="Organic Caps" data-no-transform="true"/>
                                <we-button data-set-img-shape="web_editor/pattern/pattern_oval_zebra" data-select-label="Oval Zebra" data-no-transform="true"/>
                                <t t-if="not no_animations">
                                    <we-button data-set-img-shape="web_editor/pattern/pattern_wave_1" data-select-label="Wave 1" data-animated="true" data-no-transform="true"/>
                                    <we-button data-set-img-shape="web_editor/pattern/pattern_line_star" data-select-label="Star" data-animated="true" data-no-transform="true"/>
                                    <we-button data-set-img-shape="web_editor/pattern/pattern_line_sun" data-select-label="Sun" data-animated="true" data-no-transform="true"/>
                                    <we-button data-set-img-shape="web_editor/pattern/pattern_wave_2" data-select-label="Wave 2" data-animated="true" data-no-transform="true"/>
                                    <we-button data-set-img-shape="web_editor/pattern/pattern_wave_3" data-select-label="Wave 3" data-animated="true" data-no-transform="true"/>
                                    <we-button data-set-img-shape="web_editor/pattern/pattern_point" data-select-label="Point" data-animated="true" data-no-transform="true"/>
                                    <we-button data-set-img-shape="web_editor/pattern/pattern_organic_dot" data-select-label="Organic Dot" data-animated="true" data-no-transform="true"/>
                                    <we-button data-set-img-shape="web_editor/pattern/pattern_labyrinth" data-select-label="Labyrinth" data-animated="true" data-no-transform="true"/>
                                    <we-button data-set-img-shape="web_editor/pattern/pattern_circuit" data-select-label="Circuit" data-animated="true" data-no-transform="true"/>
                                    <we-button data-set-img-shape="web_editor/pattern/pattern_wave_4" data-select-label="Wave 4" data-animated="true" data-no-transform="true"/>
                                </t>
                            </we-select-page>

                            <we-title>Solids</we-title>
                            <we-select-page string="Solids">
                                <we-button data-set-img-shape="web_editor/solid/solid_blob_1" data-select-label="Blob 1" data-no-transform="true"/>
                                <we-button data-set-img-shape="web_editor/solid/solid_blob_2" data-select-label="Blob 2" data-no-transform="true"/>
                                <we-button data-set-img-shape="web_editor/solid/solid_blob_3" data-select-label="Blob 3" data-no-transform="true"/>
                                <we-button data-set-img-shape="web_editor/solid/solid_blob_4" data-select-label="Blob 4" data-no-transform="true"/>
                                <t t-if="not no_animations">
                                    <we-button data-set-img-shape="web_editor/solid/solid_blob_5" data-select-label="Blob 5" data-animated="true" data-no-transform="true"/>
                                    <we-button data-set-img-shape="web_editor/solid/solid_blob_shadow_1" data-select-label="Blob Shadow 1" data-animated="true" data-no-transform="true"/>
                                    <we-button data-set-img-shape="web_editor/solid/solid_blob_shadow_2" data-select-label="Blob Shadow 2" data-animated="true" data-no-transform="true"/>
                                    <we-button data-set-img-shape="web_editor/solid/solid_square_1" data-select-label="Square Shadow 1" data-animated="true" data-no-transform="true"/>
                                    <we-button data-set-img-shape="web_editor/solid/solid_square_2" data-select-label="Square Shadow 2" data-animated="true" data-no-transform="true"/>
                                    <we-button data-set-img-shape="web_editor/solid/solid_square_3" data-select-label="Square Shadow 3" data-animated="true" data-no-transform="true"/>
                                </t>
                            </we-select-page>

                            <we-title>Specials</we-title>
                            <we-select-page string="Specials" t-if="not no_animations">
                                <we-button data-set-img-shape="web_editor/special/special_speed" data-select-label="Speed" data-animated="true" data-no-transform="true"/>
                                <we-button data-set-img-shape="web_editor/special/special_rain" data-select-label="Rain" data-animated="true" data-no-transform="true"/>
                                <we-button data-set-img-shape="web_editor/special/special_snow" data-select-label="Snow" data-animated="true" data-no-transform="true"/>
                                <we-button data-set-img-shape="web_editor/special/special_layered" data-select-label="Layered" data-animated="true" data-no-transform="true"/>
                                <we-button data-set-img-shape="web_editor/special/special_filter" data-select-label="Filter" data-animated="true" data-no-transform="true"/>
                                <we-button data-set-img-shape="web_editor/special/special_flag" data-select-label="Flag" data-animated="true"/>
                                <we-button data-set-img-shape="web_editor/special/special_organic" data-select-label="Organic" data-animated="true"/>
                            </we-select-page>
                        </div>
                        <div class="o_scroll_shapes_devices">
                            <we-title>Devices</we-title>
                            <we-select-page string="Devices">
                                <we-button data-set-img-shape="web_editor/devices/iphone_front_portrait" data-select-label="iPhone #1" data-img-size="0.46:1"/>
                                <we-button data-set-img-shape="web_editor/devices/iphone_3d_portrait_01" data-select-label="iPhone #2" data-img-size="0.46:1"/>
                                <we-button data-set-img-shape="web_editor/devices/iphone_3d_portrait_02" data-select-label="iPhone #3" data-img-size="0.46:1"/>
                                <we-button data-set-img-shape="web_editor/devices/iphone_front_landscape" data-select-label="iPhone #4" data-img-size="2.17:1"/>
                                <we-button data-set-img-shape="web_editor/devices/iphone_3d_landscape_01" data-select-label="iPhone #5" data-img-size="2.17:1"/>
                                <we-button data-set-img-shape="web_editor/devices/iphone_3d_landscape_02" data-select-label="iPhone #6" data-img-size="2.17:1"/>
                                <we-button data-set-img-shape="web_editor/devices/galaxy_front_portrait" data-select-label="Galaxy S #1" data-img-size="0.45:1"/>
                                <we-button data-set-img-shape="web_editor/devices/galaxy_3d_portrait_01" data-select-label="Galaxy S #2" data-img-size="0.45:1"/>
                                <we-button data-set-img-shape="web_editor/devices/galaxy_3d_portrait_02" data-select-label="Galaxy S #3" data-img-size="0.45:1"/>
                                <we-button data-set-img-shape="web_editor/devices/galaxy_front_landscape" data-select-label="Galaxy S #4" data-img-size="2.22:1"/>
                                <we-button data-set-img-shape="web_editor/devices/galaxy_3d_landscape_01" data-select-label="Galaxy S #5" data-img-size="2.22:1"/>
                                <we-button data-set-img-shape="web_editor/devices/galaxy_3d_landscape_02" data-select-label="Galaxy S #6" data-img-size="2.22:1"/>
                                <we-button data-set-img-shape="web_editor/devices/galaxy_front_portrait_half" data-select-label="Half Galaxy S" data-img-size="0.45:1"/>
                                <we-button data-set-img-shape="web_editor/devices/ipad_front_portrait" data-select-label="iPad #1" data-img-size="0.75:1"/>
                                <we-button data-set-img-shape="web_editor/devices/ipad_3d_portrait_01" data-select-label="iPad #2" data-img-size="0.75:1"/>
                                <we-button data-set-img-shape="web_editor/devices/ipad_3d_portrait_02" data-select-label="iPad #3" data-img-size="0.75:1"/>
                                <we-button data-set-img-shape="web_editor/devices/ipad_front_landscape" data-select-label="iPad #4" data-img-size="4:3"/>
                                <we-button data-set-img-shape="web_editor/devices/ipad_3d_landscape_01" data-select-label="iPad #5" data-img-size="4:3"/>
                                <we-button data-set-img-shape="web_editor/devices/ipad_3d_landscape_02" data-select-label="iPad #6" data-img-size="4:3"/>
                                <we-button data-set-img-shape="web_editor/devices/imac_front" data-select-label="iMac #1" data-img-size="16:9"/>
                                <we-button data-set-img-shape="web_editor/devices/imac_3d_01" data-select-label="iMac #2" data-img-size="16:9"/>
                                <we-button data-set-img-shape="web_editor/devices/imac_3d_02" data-select-label="iMac #3" data-img-size="16:9"/>
                                <we-button data-set-img-shape="web_editor/devices/macbook_front" data-select-label="MacBook #1" data-img-size="1.6:1"/>
                                <we-button data-set-img-shape="web_editor/devices/macbook_3d_01" data-select-label="MacBook #2" data-img-size="1.6:1"/>
                                <we-button data-set-img-shape="web_editor/devices/macbook_3d_02" data-select-label="MacBook #3" data-img-size="1.6:1"/>
                                <we-button data-set-img-shape="web_editor/devices/browser_01" data-select-label="Browser #1"/>
                                <we-button data-set-img-shape="web_editor/devices/browser_02" data-select-label="Browser #2"/>
                                <we-button data-set-img-shape="web_editor/devices/browser_03" data-select-label="Browser #3"/>
                            </we-select-page>
                        </div>
                    </div>
                </we-select-pager>
                <we-button data-set-img-shape="" data-no-preview="true" data-label="None" data-dependencies="shape_img_opt" class="o_we_image_shape_remove o_we_bg_danger fa fa-fw fa-times" data-name="remove_img_shape_opt"/>
            </we-row>
            <we-row string="Colors" class="o_we_sublevel_1">
                <we-colorpicker data-set-img-shape-color="true" data-dependencies="shape_img_opt" data-name="img-shape-color-0" data-color-id="0"/>
                <we-colorpicker data-set-img-shape-color="true" data-dependencies="shape_img_opt" data-name="img-shape-color-1" data-color-id="1"/>
                <we-colorpicker data-set-img-shape-color="true" data-dependencies="shape_img_opt" data-name="img-shape-color-2" data-color-id="2"/>
                <we-colorpicker data-set-img-shape-color="true" data-dependencies="shape_img_opt" data-name="img-shape-color-3" data-color-id="3"/>
                <we-colorpicker data-set-img-shape-color="true" data-dependencies="shape_img_opt" data-name="img-shape-color-4" data-color-id="4"/>
            </we-row>
            <we-row string="Transform" class="o_we_sublevel_1">
                <we-button class="oi oi-fw oi-arrows-h" data-name="img_shape_transform_flip_x_opt" data-set-img-shape-flip-x="true" data-no-preview="true" data-dependencies="shape_img_opt" title="Horizontal mirror"/>
                <we-button class="oi oi-fw oi-arrows-v" data-name="img_shape_transform_flip_y_opt" data-set-img-shape-flip-y="true" data-no-preview="true" data-dependencies="shape_img_opt" title="Vertical mirror"/>
                <we-button class="fa fa-fw fa-rotate-left" data-name="img_shape_transform_rotate_x_opt" data-set-img-shape-rotate-left="true" data-no-preview="true" data-dependencies="shape_img_opt" title="Rotate left"/>
                <we-button class="fa fa-fw fa-rotate-right" data-name="img_shape_transform_rotate_y_opt" data-set-img-shape-rotate-right="true" data-no-preview="true" data-dependencies="shape_img_opt" title="Rotate right"/>
            </we-row>
            <we-row string="Speed" class="o_we_sublevel_1">
                <we-range data-name="shape_anim_speed_opt" data-no-preview="true" data-display-range-value="true" data-attribute-name="shapeAnimationSpeed" data-select-data-attribute="" data-max="2" data-min="-2" data-step="0.1" data-to-ratio="true"/>
            </we-row>
            <we-row string="Stretch" class="o_we_sublevel_1">
                <we-checkbox data-remove-stretch="true" data-dependencies="shape_img_opt" data-no-preview="true" data-name="toggle_stretch_opt"/>
            </we-row>
        </div>
        <we-input string="Description" class="o_we_large" data-select-attribute="" data-attribute-name="alt" placeholder="Alt tag" title="'Alt tag' specifies an alternate text for an image, if the image cannot be displayed (slow connection, missing image, screen reader ...)."/>
        <we-input string="Tooltip" class="o_we_large" data-select-attribute="" data-attribute-name="title" placeholder="Title tag" title="'Title tag' is shown as a tooltip when you hover the picture."/>
        <we-row string="Transform">
            <we-button class="fa fa-fw fa-crop" data-crop="true" data-no-preview="true" title="Crop Image"/>
            <we-button class="o_we_bg_danger ms-0 border-start-0" data-reset-crop="" data-no-preview="true" title="Reset crop">
                Reset
            </we-button>
            <we-button class="fa fa-fw fa-object-ungroup" data-name="image_transform_opt" data-transform="true" data-no-preview="true" title="Transform the picture"/>
            <we-button class="ms-0 border-start-0" data-reset-transform="" data-no-preview="true" title="Reset transformation">
                Reset
            </we-button>
        </we-row>

        <t t-call="web_editor.snippet_options_image_optimization_widgets"/>

        <we-button-group string="Size" data-css-property="width">
            <we-button data-select-style="" title="Resize Default">Default</we-button>
            <we-button data-select-style="25%" title="Resize Quarter">25%</we-button>
            <we-button data-select-style="50%" title="Resize Half">50%</we-button>
            <we-button data-select-style="100%" title="Resize Full">100%</we-button>
        </we-button-group>
    </div>

    <div data-selector="span.fa, i.fa, img" data-exclude="[data-oe-type='image'] &gt; img, [data-oe-xpath]" class="o_we_image_options">
        <we-select string="Alignment" data-state-to-first-class="true">
            <we-button data-select-class="" title="Unalign">None</we-button>
            <we-button data-select-class="me-auto float-start" title="Align Left">Left</we-button>
            <we-button data-select-class="mx-auto d-block" title="Align Center">Center</we-button>
            <we-button data-select-class="ms-auto float-end" title="Align Right">Right</we-button>
        </we-select>

        <we-row string="Style">
            <we-button class="fa fa-fw fa-square" data-select-class="rounded" title="Shape: Rounded"/>
            <we-button class="fa fa-fw fa-circle-o" data-select-class="rounded-circle" title="Shape: Circle"/>
            <we-button class="fa fa-fw fa-sun-o" data-select-class="shadow" title="Shadow"/>
            <we-button class="fa fa-fw fa-picture-o" data-select-class="img-thumbnail" title="Shape: Thumbnail"/>
        </we-row>

        <we-input string="Padding" data-select-style="" data-unit="px" data-css-property="padding"/>
    </div>

    <div data-js="DynamicSvg" data-selector="img">
        <we-row string="Dynamic Colors" data-name="colors">
            <we-colorpicker data-color="true" data-color-name="c1"/>
            <we-colorpicker data-color="true" data-color-name="c2"/>
            <we-colorpicker data-color="true" data-color-name="c3"/>
            <we-colorpicker data-color="true" data-color-name="c4"/>
            <we-colorpicker data-color="true" data-color-name="c5"/>
        </we-row>
    </div>
</t>

