<?xml version="1.0"?>
<data inherit_id="website.snippet_options_carousel_bottom_controllers" primary="True">
    <xpath expr="//div" position="attributes">
        <attribute name="data-target">.s_carousel_cards</attribute>
        <attribute name="data-exclude"/>
        <attribute name="data-js">Carousel</attribute>
    </xpath>
    <xpath expr="(//we-select)[3]" position="after">
        <we-checkbox string="Images" data-select-class="s_carousel_cards_with_img" data-toggle-card-img="true" data-no-preview="true" data-name="toggle_card_img_opt"/>
        <we-button-group string="Position" class="o_we_sublevel_1" data-apply-to=".s_card" data-dependencies="toggle_card_img_opt">
            <we-button title="Left" data-select-class="flex-lg-row" data-img="/website/static/src/img/snippets_options/pos_left.svg"/>
            <we-button title="Right" data-select-class="flex-lg-row-reverse" data-img="/website/static/src/img/snippets_options/pos_right.svg"/>
        </we-button-group>
        <we-range string="Width" class="o_we_sublevel_1" data-dependencies="toggle_card_img_opt" title="Adjust the image width" data-select-style="0" data-css-property="--card-img-size-h" data-unit="%" t-att-data-min="10" t-att-data-max="75" t-att-data-step="5" data-display-range-value="true" data-display-range-value-unit="%"/>
        <we-range string="Extra height" title="Add extra height to cards" data-select-style="0" data-css-property="--CardBody-extra-height" data-unit="px" t-att-data-min="0" t-att-data-max="500" t-att-data-step="10" data-display-range-value="true" data-display-range-value-unit="px"/>
    </xpath>
    <xpath expr="//div[@data-js='Carousel']" position="after">
        <div data-js="Box" data-selector="section" data-target=".s_carousel_cards">
            <t t-call="website.snippet_options_border_widgets">
                <t t-set="apply_to" t-valuef=".carousel-inner"/>
            </t>
            <we-button-group string="Shadow" data-shadow-class="shadow" t-att-data-variable="shadow_variable" data-apply-to=".carousel-inner">
                <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-group>
            <we-multi data-css-property="box-shadow" data-dependencies="shadow_active_opt" t-att-data-variable="shadow_variable" data-apply-to=".carousel-inner">
                <we-colorpicker string="Color" class="o_we_sublevel_1" data-select-style="" data-css-compatible=""/>
                <we-row string="Offset (X, Y)" class="o_we_sublevel_1">
                    <we-input data-select-style="" data-unit="px"/>
                    <we-input data-select-style="" data-unit="px"/>
                </we-row>
                <we-input string="Blur" class="o_we_sublevel_1" data-select-style="" data-unit="px"/>
                <we-input string="Spread" class="o_we_sublevel_1" 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>
        </div>
    </xpath>
<xpath expr="." position="attributes"><attribute name="t-name">website.snippet_options_carousel_cards</attribute></xpath></data>

