<?xml version="1.0"?>
<data inherit_id="website.snippet_options">
    <!-- Remove the default height widget for both the snippet and its cards -->
    <xpath expr="//div[@data-js='ScrollButton']" position="attributes">
        <attribute name="data-exclude" add=".s_floating_blocks, .s_floating_blocks .s_floating_blocks_block" separator=", "/>
    </xpath>
    <!-- Remove inner card's container width controller -->
    <xpath expr="//div[@data-js='ContainerWidth']" position="attributes">
        <attribute name="data-exclude" add=".s_floating_blocks .s_floating_blocks_block" separator=","/>
    </xpath>

    <!-- Snippet options: .s_floating_blocks -->
    <xpath expr="." position="inside">
        <div data-js="FloatingBlocks" data-selector=".s_floating_blocks">
            <we-row string="Cards">
                <we-button title="Add a new Card" data-add-card="" data-no-preview="true" class="o_we_bg_success">
                    Add New
                </we-button>
                <!-- Spacer -->
                <div class="flex-grow-1"/>
            </we-row>
        </div>

        <!-- Apply global cards options to ".s_floating_blocks_wrapper".
             Each Card will inherit these values in CSS -->
        <div data-selector=".s_floating_blocks" data-target=".s_floating_blocks_wrapper">
            <hr/>
            <we-title>Cards Design</we-title>
            <div class="py-1 opacity-75">
                Global options for all inner cards.
            </div>
            <we-range string="Roundness" class="o_we_sublevel_1 mt-1" title="Applies to all cards" data-select-class="rounded-0|rounded-1|rounded-2|rounded-3|rounded-4|rounded-5"/>

            <we-checkbox string="Shadows" class="o_we_sublevel_1 mt-1" data-select-class="|s_floating_blocks_wrapper_shadow" data-no-preview="true" title="Applies to all cards"/>
        </div>
    </xpath>

    <!-- Specific Card Options: .s_floating_blocks .s_floating_blocks_block -->
    <xpath expr="//div[@id='so_text_align']" position="before">

        <!-- Bind custom JS and lock cards within the snippet -->
        <div data-js="FloatingBlocksBlock" data-selector=".s_floating_blocks .s_floating_blocks_block" data-drop-lock-within=".s_floating_blocks"/>

        <div data-js="FloatingBlocksBlockGrid" data-selector=".s_floating_blocks .s_floating_blocks_block" data-target=".container-fluid">
            <we-row string="Vert. Alignment" title="Vertical Alignment">
                <we-button-group data-name="block_alignment_mobile_opt">
                    <we-button title="Align Top" data-select-class="align-self-start" data-img="/website/static/src/img/snippets_options/align_solo_top.svg"/>
                    <we-button title="Align Middle" data-select-class="align-self-center" data-img="/website/static/src/img/snippets_options/align_solo_middle.svg"/>
                    <we-button title="Align Bottom" data-select-class="align-self-end" data-img="/website/static/src/img/snippets_options/align_solo_bottom.svg"/>
                </we-button-group>
                <!-- Spacer -->
                <div class="flex-grow-1"/>
            </we-row>
        </div>

        <!-- Lock grid-items within their grid -->
        <div data-js="FloatingBlocksBlockGridItem" data-selector=".s_floating_blocks_block_grid .o_grid_item" data-drop-lock-within=".s_floating_blocks_block_grid"/>
    </xpath>

    <xpath expr="//div[@id='so_text_align']" position="before">
        <!-- Enable grid-items injections -->
        <div data-js="layout_column" data-selector=".s_floating_blocks .s_floating_blocks_block">
            <we-button-group string="Add Elements" data-no-preview="true">
                <we-button class="o_we_bg_brand_primary o_grid" data-add-element="image" title="Image" data-name="image">Image</we-button>
                <we-button class="o_we_bg_brand_primary o_grid" data-add-element="text" title="Text" data-name="text">Text</we-button>
                <we-button class="o_we_bg_brand_primary o_grid" data-add-element="button" title="Button" data-name="button">Button</we-button>
            </we-button-group>
        </div>
        <!-- Enable border control -->
        <div data-js="Box" data-selector=".s_floating_blocks .s_floating_blocks_block">
            <t t-call="website.snippet_options_border_widgets">
                <t t-set="no_border_radius" t-value="true"/>
            </t>
        </div>
    </xpath>
</data>


