<?xml version="1.0"?>
<data inherit_id="website.snippet_options">
    <xpath expr="//t[@t-call='website.snippet_options_background_options']" position="before">
        <div data-js="GalleryImageList" data-selector=".s_image_gallery">
            <we-row string="Images">
                <we-button class="o_we_bg_success" data-add-images="true" data-no-preview="true">Add</we-button>
                <we-button class="o_we_bg_danger" data-remove-all-images="true" data-no-preview="true">Remove all</we-button>
            </we-row>
        </div>
    </xpath>
    <xpath expr="." position="inside">
        <div data-js="gallery" data-selector=".s_image_gallery">
            <we-select string="Mode" data-dependencies="!slideshow_mode_opt">
                <we-button data-mode="grid" data-name="grid_mode_opt">Grid</we-button>
                <we-button data-mode="masonry" data-name="masonry_mode_opt">Masonry</we-button>
                <we-button data-mode="nomode">Float</we-button>

                <!-- Hidden option -->
                <we-button data-mode="slideshow" data-name="slideshow_mode_opt">Slideshow</we-button>
            </we-select>
            <we-input string="Speed" data-dependencies="slideshow_mode_opt" data-apply-to=".carousel:first" data-select-data-attribute="0s" data-attribute-name="bsInterval" data-unit="s" data-save-unit="ms" data-step="0.1"/>
            <we-select string="Columns" data-dependencies="masonry_mode_opt, grid_mode_opt">
                <we-button data-columns="1">1</we-button>
                <we-button data-columns="2">2</we-button>
                <we-button data-columns="3">3</we-button>
                <we-button data-columns="4">4</we-button>
                <we-button data-columns="6">6</we-button>
                <we-button data-columns="12">12</we-button>
            </we-select>
            <we-range string="Images Spacing" data-dependencies="!slideshow_mode_opt" data-select-class="o_spc-none|o_spc-small|o_spc-medium|o_spc-big"/>
            <we-select string="Style" data-dependencies="slideshow_mode_opt">
                <we-button data-select-class="">Classic</we-button>
                <we-button data-select-class="s_image_gallery_controllers_indicators_outside">Indicators outside</we-button>
                <we-button data-select-class="s_image_gallery_controllers_outside">Outside, center</we-button>
                <we-button data-select-class="s_image_gallery_controllers_outside s_image_gallery_controllers_outside_arrows_left">Outside, at right</we-button>
                <we-button data-select-class="s_image_gallery_controllers_outside s_image_gallery_controllers_outside_arrows_right">Outside, at left</we-button>
            </we-select>
            <we-checkbox string="Invert colors" data-dependencies="slideshow_mode_opt" data-apply-to=".carousel" class="o_we_sublevel_1" data-select-class="carousel-dark"/>
            <we-select string="Arrows" data-dependencies="slideshow_mode_opt" class="o_we_sublevel_1">
                <we-button data-select-class="s_image_gallery_arrows_default">Default</we-button>
                <we-button data-select-class="s_image_gallery_arrows_boxed">Boxed</we-button>
                <we-button data-select-class="s_image_gallery_arrows_rounded">Rounded</we-button>
                <we-button data-select-class="s_image_gallery_arrows_hidden">Hidden</we-button>
            </we-select>
            <we-select string="Indicators" data-dependencies="slideshow_mode_opt" class="o_we_sublevel_1">
                <we-button data-select-class="s_image_gallery_indicators_bars">Bars</we-button>
                <we-button data-select-class="s_image_gallery_indicators_dots">Dots</we-button>
                <we-button data-select-class="s_image_gallery_indicators_numbers">Numbers</we-button>
                <we-button data-select-class="s_image_gallery_indicators_squared">Squared Miniatures</we-button>
                <we-button data-select-class="s_image_gallery_indicators_rounded">Rounded Miniatures</we-button>
                <we-button data-select-class="s_image_gallery_indicators_hidden">Hidden</we-button>
            </we-select>
            <t t-call="website.snippet_options_border_widgets">
                <t t-set="apply_to" t-valuef="img"/>
                <t t-set="so_rounded_no_dependencies" t-value="true"/>
            </t>
        </div>
        <div data-js="gallery_img" data-selector=".s_image_gallery img"/>
    </xpath>
</data>

