<?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"/>

    <div data-js="VersionControl" data-selector="[data-snippet]"/>

    <!-- 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_brand_primary" data-replace-media="true" data-no-preview="true">Replace</we-button>
            <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."/>
        </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>

    <div data-selector="img" data-exclude="[data-oe-type='image'] &gt; img, [data-oe-xpath]">
        <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."/>
    </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_select_grid o_we_fake_transparent_background">
                    <!-- This page only contains animated shapes by default. If
                    using xpath to add non-animated shapes, also use xpath to
                    remove the t-if on the page. This is why individual options
                    also have that t-if.  -->
                    <we-select-page class="o_we_basic_shapes" string="Basics" t-if="not no_animations">
                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/basic/bsc_square_1" data-select-label="Square 1" data-animated="true"/>
                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/basic/bsc_square_2" data-select-label="Square 2" data-animated="true"/>
                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/basic/bsc_square_3" data-select-label="Square 3" data-animated="true"/>
                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/basic/bsc_square_4" data-select-label="Square 4" data-animated="true"/>
                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/basic/bsc_square_5" data-select-label="Square 5" data-animated="true"/>
                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/basic/bsc_square_6" data-select-label="Square 6" data-animated="true"/>
                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/basic/bsc_square_rounded_1" data-select-label="Square Rounded 1" data-animated="true"/>
                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/basic/bsc_square_rounded_2" data-select-label="Square Rounded 2" data-animated="true"/>
                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/basic/bsc_organic_1" data-select-label="Organic Soft" data-animated="true"/>
                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/basic/bsc_organic_2" data-select-label="Organic Medium" data-animated="true"/>
                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/basic/bsc_organic_3" data-select-label="Organic Hard" data-animated="true"/>
                    </we-select-page>
                    <we-select-page string="Solids">
                        <we-button data-set-img-shape="web_editor/solid/blob_1_solid_rd" data-select-label="Blob Solid 1"/>
                        <we-button data-set-img-shape="web_editor/solid/blob_2_solid_str" data-select-label="Blob Solid 2"/>
                        <we-button data-set-img-shape="web_editor/solid/blob_3_solid_rd" data-select-label="Blob Solid 3"/>
                        <we-button data-set-img-shape="web_editor/solid/oval_1_solid_rd" data-select-label="Oval Solid"/>
                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/solid/sld_blob_4" data-select-label="Blob Solid 4" data-animated="true"/>
                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/solid/sld_blob_shadow_1" data-select-label="Blob Shadow 1" data-animated="true"/>
                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/solid/sld_blob_shadow_2" data-select-label="Blob Shadow 2" data-animated="true"/>
                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/solid/sld_square_1" data-select-label="Square 1" data-animated="true"/>
                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/solid/sld_square_2" data-select-label="Square 2" data-animated="true"/>
                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/solid/sld_square_organic_1" data-select-label="Square - Organic" data-animated="true"/>
                    </we-select-page>
                    <we-select-page string="Patterns">
                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/pattern/organic_2_pattern_dot" data-select-label="Organic Dot" data-animated="true"/>
                        <we-button data-set-img-shape="web_editor/pattern/organic_3_pattern_cross" data-select-label="Organic Cross"/>
                        <we-button data-set-img-shape="web_editor/pattern/organic_4_pattern_caps" data-select-label="Organic Caps"/>
                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/pattern/pattern_labyrinth" data-select-label="Labyrinth" data-animated="true"/>
                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/pattern/pattern_points_1" data-select-label="Points" data-animated="true"/>
                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/pattern/pattern_waves_1" data-select-label="Waves 1" data-animated="true"/>
                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/pattern/pattern_waves_2" data-select-label="Waves 2" data-animated="true"/>
                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/pattern/pattern_waves_3" data-select-label="Waves 3" data-animated="true"/>
                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/pattern/pattern_waves_4" data-select-label="Waves 4" data-animated="true"/>
                    </we-select-page>
                    <we-select-page string="Lines">
                        <we-button data-set-img-shape="web_editor/line/oval_3_pattern_line" data-select-label="Oval Line"/>
                        <we-button data-set-img-shape="web_editor/line/organic_1_line" data-select-label="Organic Line"/>
                        <we-button data-set-img-shape="web_editor/line/oval_2_line" data-select-label="Oval Line 2"/>
                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/line/little_lines_1" data-select-label="Little lines 1" data-animated="true"/>
                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/line/little_lines_2" data-select-label="Little lines 2" data-animated="true"/>
                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/line/little_lines_3" data-select-label="Little lines 2" data-animated="true"/>
                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/line/line_square_1" data-select-label="Square" data-animated="true"/>
                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/line/line_triangle" data-select-label="Triangles" data-animated="true"/>
                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/line/line_star" data-select-label="Star" data-animated="true"/>
                        <we-button t-if="not no_animations" data-set-img-shape="web_editor/line/line_sun" data-select-label="Sun" data-animated="true"/>
                    </we-select-page>
                    <we-select-page string="Floats" t-if="not no_animations">
                        <we-button data-set-img-shape="web_editor/float/flt_primary_1" data-select-label="Primary shapes 1" data-animated="true"/>
                        <we-button data-set-img-shape="web_editor/float/flt_primary_2" data-select-label="Primary shapes 2" data-animated="true"/>
                        <we-button data-set-img-shape="web_editor/float/flt_primary_3" data-select-label="Primary shapes 3" data-animated="true"/>
                        <we-button data-set-img-shape="web_editor/float/flt_planets_1" data-select-label="Planets 1" data-animated="true"/>
                        <we-button data-set-img-shape="web_editor/float/flt_planets_2" data-select-label="Planets 2" data-animated="true"/>
                        <we-button data-set-img-shape="web_editor/float/flt_square_1" data-select-label="Square 1" data-animated="true"/>
                        <we-button data-set-img-shape="web_editor/float/flt_square_2" data-select-label="Square 2" data-animated="true"/>
                        <we-button data-set-img-shape="web_editor/float/flt_square_3" data-select-label="Square 3" data-animated="true"/>
                        <we-button data-set-img-shape="web_editor/float/flt_square_4" data-select-label="Square 4" data-animated="true"/>
                    </we-select-page>
                    <we-select-page string="Specials" t-if="not no_animations">
                        <we-button data-set-img-shape="web_editor/special/spl_speed_1" data-select-label="Speed" data-animated="true"/>
                        <we-button data-set-img-shape="web_editor/special/spl_rain_1" data-select-label="Rain" data-animated="true"/>
                        <we-button data-set-img-shape="web_editor/special/spl_snow_1" data-select-label="Snow" data-animated="true"/>
                        <we-button data-set-img-shape="web_editor/special/spl_flag_1" data-select-label="Flag" data-animated="true"/>
                        <we-button data-set-img-shape="web_editor/special/spl_filter_1" data-select-label="Filter" data-animated="true"/>
                        <we-button data-set-img-shape="web_editor/special/spl_organics_1" data-select-label="Organics" data-animated="true"/>
                        <we-button data-set-img-shape="web_editor/special/spl_circuit_1" data-select-label="Circuit" data-animated="true"/>
                    </we-select-page>
                    <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="375 x 812"/>
                        <we-button data-set-img-shape="web_editor/devices/iphone_3d_portrait_01" data-select-label="iPhone #2" data-img-size="375 x 812"/>
                        <we-button data-set-img-shape="web_editor/devices/iphone_3d_portrait_02" data-select-label="iPhone #3" data-img-size="375 x 812"/>
                        <we-button data-set-img-shape="web_editor/devices/iphone_front_landscape" data-select-label="iPhone #4" data-img-size="812 x 375"/>
                        <we-button data-set-img-shape="web_editor/devices/iphone_3d_landscape_01" data-select-label="iPhone #5" data-img-size="812 x 375"/>
                        <we-button data-set-img-shape="web_editor/devices/iphone_3d_landscape_02" data-select-label="iPhone #6" data-img-size="812 x 375"/>
                        <we-button data-set-img-shape="web_editor/devices/galaxy_front_portrait" data-select-label="Galaxy S #1" data-img-size="360 x 800"/>
                        <we-button data-set-img-shape="web_editor/devices/galaxy_3d_portrait_01" data-select-label="Galaxy S #2" data-img-size="360 x 800"/>
                        <we-button data-set-img-shape="web_editor/devices/galaxy_3d_portrait_02" data-select-label="Galaxy S #3" data-img-size="360 x 800"/>
                        <we-button data-set-img-shape="web_editor/devices/galaxy_front_landscape" data-select-label="Galaxy S #4" data-img-size="800 x 360"/>
                        <we-button data-set-img-shape="web_editor/devices/galaxy_3d_landscape_01" data-select-label="Galaxy S #5" data-img-size="800 x 360"/>
                        <we-button data-set-img-shape="web_editor/devices/galaxy_3d_landscape_02" data-select-label="Galaxy S #6" data-img-size="800 x 360"/>
                        <we-button data-set-img-shape="web_editor/devices/ipad_front_portrait" data-select-label="iPad #1" data-img-size="768 x 1024"/>
                        <we-button data-set-img-shape="web_editor/devices/ipad_3d_portrait_01" data-select-label="iPad #2" data-img-size="768 x 1024"/>
                        <we-button data-set-img-shape="web_editor/devices/ipad_3d_portrait_02" data-select-label="iPad #3" data-img-size="768 x 1024"/>
                        <we-button data-set-img-shape="web_editor/devices/ipad_front_landscape" data-select-label="iPad #4" data-img-size="1024 x 768"/>
                        <we-button data-set-img-shape="web_editor/devices/ipad_3d_landscape_01" data-select-label="iPad #5" data-img-size="1024 x 768"/>
                        <we-button data-set-img-shape="web_editor/devices/ipad_3d_landscape_02" data-select-label="iPad #6" data-img-size="1024 x 768"/>
                        <we-button data-set-img-shape="web_editor/devices/imac_front" data-select-label="iMac #1" data-img-size="1280 x 720"/>
                        <we-button data-set-img-shape="web_editor/devices/imac_3d_01" data-select-label="iMac #2" data-img-size="1280 x 720"/>
                        <we-button data-set-img-shape="web_editor/devices/imac_3d_02" data-select-label="iMac #3" data-img-size="1280 x 720"/>
                        <we-button data-set-img-shape="web_editor/devices/macbook_front" data-select-label="MacBook #1" data-img-size="1280 x 800"/>
                        <we-button data-set-img-shape="web_editor/devices/macbook_3d_01" data-select-label="MacBook #2" data-img-size="1280 x 800"/>
                        <we-button data-set-img-shape="web_editor/devices/macbook_3d_02" data-select-label="MacBook #3" data-img-size="1280 x 800"/>
                        <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>
                </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 fa fa-fw fa-times"/>
            </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>
        </div>

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

        <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="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>

        <we-button-group string="Width" 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>

