<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

<t t-name="html_builder.BackgroundShapeOption">
    <BuilderRow label.translate="Shape">
        <div class="btn-group o-hb-button-group">
            <BuilderSlidingPanel
                label.translate="Shape"
                extraClasses="'btn-secondary'"
                fullHeight="true"
                darkBackground="true">
                <t t-out="state.shapeName"/>
                <t t-set-slot="content" t-slot-scope="panel">
                    <BackgroundShapeSelector
                        onClose="panel.close"
                        shapeActionId="'setBackgroundShape'"
                        buttonWrapperClassName="'o-hb-bg-shape-btn'"
                        selectorTitle.translate="Background Shapes"
                        shapeGroups="getBackgroundShapeGroups()"
                        imgThroughDiv="true"
                        getShapeUrl="getShapeStyleUrl"
                    />
                </t>
            </BuilderSlidingPanel>
            <BuilderButton 
                title.translate="Remove the shape"
                action="'setBackgroundShape'" 
                actionValue="''" 
                preview="false"
                icon="'oi-close'"
                className="'btn-danger-color-hover border-start-0 rounded-start-0 m-0 py-0 flex-grow-0'"
                t-if="state.hasShape"/>
            </div>
            <BuilderButton
                title.translate="Show/Hide on Mobile"
                action="'showOnMobile'"
                preview="false"
                className="'o-hb-btn-has-img-icon o_hb_device btn-danger-color-active'"
                t-if="state.hasShape">
                <Image src="'/html_builder/static/img/options/mobile_invisible.svg'" style="'width: 12px'" />
            </BuilderButton>
    </BuilderRow>

    <t t-if="this.state.hasShape">
        <BuilderRow label.translate="Colors" level="1">
            <t t-foreach="this.state.shapeColorNames" t-as="colorName" t-key="colorName">
                <BuilderColorPicker
                    action="'backgroundShapeColor'"
                    actionParam="colorName"
                    enabledTabs="['solid', 'custom']"
                />
            </t>
            <!-- TODO handle all the attributes -->
            <BuilderColorPicker title.translate="Background color" styleAction="'background-color'" applyTo="':scope > .o_we_shape'" enabledTabs="['solid', 'custom']"/>
        </BuilderRow>

        <BuilderRow label.translate="Transform" level="1" preview="false">
            <BuilderButton
                title.translate="Horizontal flip"
                icon="'oi-arrows-h'"
                action="'flipShape'"
                actionParam="'x'"/>
            <BuilderButton
                title.translate="Vertical flip"
                icon="'oi-arrows-v'"
                action="'flipShape'"
                actionParam="'y'"/>
        </BuilderRow>

        <BuilderRow label.translate="Speed" level="1" t-if="state.isAnimated" preview="false">
            <BuilderRange
                action="'setBgAnimationSpeed'"
                min="-2"
                max="2"
                step="0.1"
                displayRangeValue="true"
                computedOutput="this.toRatio"/>
        </BuilderRow>
    </t>
</t>

</templates>
