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

<t t-name="website.ScrollButtonOption">
    <BuilderRow label="this.state.heightLabel">
        <BuilderButtonGroup action="'scrollButtonSectionHeightClass'">
            <BuilderButton id="'minheight_auto_opt'" actionParam="''" title.translate="Fit content">Auto</BuilderButton>
            <BuilderButton actionParam="'o_half_screen_height'" title.translate="Half screen">50%</BuilderButton>
            <BuilderButton id="'full_height_opt'" actionParam="'o_full_screen_height'" title.translate="Full screen">100%</BuilderButton>
        </BuilderButtonGroup>
    </BuilderRow>

    <BuilderRow label.translate="Height" level="1" t-if="this.showHeightField()">
        <BuilderNumberInput styleAction="{ mainParam: 'height', force: true, allowImportant: false }" unit="'px'" min="0"/>
    </BuilderRow>

    <BuilderRow label.translate="Scroll Down Button" t-if="this.isActiveItem('full_height_opt') and !state.scrollDownButtonDisabled">
        <BuilderCheckbox id="'scroll_button_opt'" action="'addScrollButton'"/>
    </BuilderRow>

    <t t-if="this.isActiveItem('scroll_button_opt')">
        <BuilderRow label.translate="Animation" level="1" applyTo="':scope > .o_scroll_button'">
            <BuilderSelect>
                <BuilderSelectItem classAction="''">None</BuilderSelectItem>
                <BuilderSelectItem classAction="'anim-heartbeat'">Heartbeat</BuilderSelectItem>
            </BuilderSelect>
        </BuilderRow>
        <BuilderRow label.translate="Size" level="1" applyTo="':scope > .o_scroll_button > i'">
            <BuilderButtonGroup>
                <BuilderButton classAction="'fa-1x'" title.translate="Size 1x">1x</BuilderButton>
                <BuilderButton classAction="'fa-2x'" title.translate="Size 2x">2x</BuilderButton>
                <BuilderButton classAction="'fa-3x'" title.translate="Size 3x">3x</BuilderButton>
                <BuilderButton classAction="'fa-4x'" title.translate="Size 4x">4x</BuilderButton>
                <BuilderButton classAction="'fa-5x'" title.translate="Size 5x">5x</BuilderButton>
            </BuilderButtonGroup>
        </BuilderRow>
        <BuilderRow label.translate="Colors" level="1" applyTo="':scope > .o_scroll_button'">
            <BuilderColorPicker styleAction="'background-color'" title.translate="Apply a background color"/>
            <BuilderColorPicker styleAction="'color'" title.translate="Apply an icon color" enabledTabs="['solid', 'custom', 'gradient']"/>
        </BuilderRow>
        <BuilderRow label.translate="Spacing" level="1" applyTo="':scope > .o_scroll_button'">
            <BuilderRange action="'setClassRange'" actionParam="['mb-0', 'mb-1', 'mb-2', 'mb-3', 'mb-4', 'mb-5']" max="5"/>
        </BuilderRow>
    </t>
</t>

</templates>
