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

<t t-name="website.animateOnScrollInOut">
    <BuilderButtonGroup t-if="isActiveItem('animation_on_scroll_opt')" preview="false" action="'forceAnimation'">
        <BuilderButton classAction="''">In</BuilderButton>
        <BuilderButton classAction="'o_animate_out'">Out</BuilderButton>
    </BuilderButtonGroup>
</t>

<t t-name="website.AnimateOption">
    <t t-if="this.state.isOptionActive">
        <BuilderRow label.translate="Animation">
            <BuilderSelect t-if="!this.isActiveItem('transform_image')" preview="false" dropdownClass="props.dropdownClass">
                <BuilderSelectItem action="'setAnimationMode'" actionValue="''"
                            classAction="''"
                            id="'no_animation_opt'"
                            t-if="!props.requireAnimation">None</BuilderSelectItem>
                <BuilderSelectItem action="'setAnimationMode'" actionValue="'onAppearance'"
                            actionParam="{forceAnimation: true}"
                            classAction="'o_animate'"
                            id="'animation_on_appearance_opt'">On Appearance</BuilderSelectItem>
                <BuilderSelectItem action="'setAnimationMode'" actionValue="'onScroll'"
                            classAction="'o_animate o_animate_on_scroll'"
                            actionParam="{forceAnimation: true}"
                            id="'animation_on_scroll_opt'"
                            t-if="!state.isLimitedEffect">On Scroll</BuilderSelectItem>
                <BuilderSelectItem action="'setAnimationMode'" actionValue="'onHover'"
                            classAction="'o_animate_on_hover'"
                            id="'animation_on_hover_opt'"
                            t-if="state.canHover">On Hover</BuilderSelectItem>
            </BuilderSelect>
            <t t-if="!!props.slots?.animationRowTrailing" t-slot="animationRowTrailing"/>
            <t t-else="" t-call="website.animateOnScrollInOut"/> 
        </BuilderRow>
        <BuilderRow label.translate="On Scroll" level="1" t-if="!!props.slots?.animationRowTrailing">
            <t t-call="website.animateOnScrollInOut"/>
        </BuilderRow>
        <BuilderRow label.translate="Effect" level="1">
            <BuilderSelect id="'animation_effect_opt'" dropdownClass="props.dropdownClass"
                t-if="state.hasAnimateClass and !this.isActiveItem('animation_on_hover_opt')"
                action="'setAnimationEffect'" actionParam="''">

                <t t-foreach="state.effectItems" t-as="item" t-key="item.className">
                    <BuilderSelectItem actionValue="item.className" actionParam="item.directionClass"
                        t-out="item.label"
                        t-if="!item.check || item.check()" />
                </t>
            </BuilderSelect>
        </BuilderRow>
        <BuilderRow label.translate="Direction" level="1" t-if="state.hasAnimateClass and !state.isLimitedEffect">
            <BuilderSelect id="'animation_direction_opt'" action="'forceAnimation'" dropdownClass="props.dropdownClass">
                <t t-foreach="state.directionItems" t-as="item" t-key="item.className">
                    <BuilderSelectItem classAction="item.className" t-out="item.label" />
                </t>
            </BuilderSelect>
        </BuilderRow>
        <!-- Trigger -->
        <BuilderRow label.translate="Trigger" level="1">
            <BuilderSelect t-if="this.isActiveItem('animation_on_appearance_opt') and !state.isInDropdown" dropdownClass="props.dropdownClass">
                <BuilderSelectItem classAction="''">First Time Only</BuilderSelectItem>
                <BuilderSelectItem classAction="'o_animate_both_scroll'">Every Time</BuilderSelectItem>
            </BuilderSelect>
        </BuilderRow>
        <!-- Intensity -->
        <BuilderRow label.translate="Intensity" level="1" t-if="state.showIntensity">
            <BuilderRange
                action="'setAnimateIntensity'"
                preview="false"
                min="1"
                max="100"
                step="1"
                displayRangeValue="true"/>
        </BuilderRow>
        <!-- Scroll Zone -->
        <BuilderRow label.translate="Scroll Zone" level="1" t-if="this.isActiveItem('animation_on_scroll_opt')" preview="false">
            <BuilderNumberInput unit="'%'" dataAttributeAction="'scrollZoneStart'" action="'forceAnimation'" />
            <span class="mx-2">to</span>
            <BuilderNumberInput unit="'%'" dataAttributeAction="'scrollZoneEnd'" action="'forceAnimation'" />
        </BuilderRow>
        <BuilderContext t-if="this.isActiveItem('animation_on_appearance_opt')">
            <!-- Start After -->
            <BuilderRow label.translate="Start After" level="1">
                <BuilderNumberInput styleAction="'animation-delay'" action="'forceAnimation'" unit="'s'" />
            </BuilderRow>
            <!-- Duration -->
            <BuilderRow label.translate="Duration" level="1">
                <BuilderNumberInput styleAction="'animation-duration'" action="'forceAnimation'" default="0.4" unit="'s'" />
            </BuilderRow>
        </BuilderContext>
        <t t-if="this.isActiveItem('animation_on_hover_opt')">
            <BuilderRow label.translate="Effect" level="1">
                <BuilderSelect action="'setHoverEffect'" actionParam="{}" dropdownClass="props.dropdownClass">
                    <BuilderSelectItem actionValue="'overlay'" id="'hover_effect_overlay_opt'">Overlay</BuilderSelectItem>
                    <BuilderSelectItem actionValue="'image_zoom_in'" id="'hover_effect_zoom_in_opt'">Zoom In</BuilderSelectItem>
                    <BuilderSelectItem actionValue="'image_zoom_out'" id="'hover_effect_zoom_out_opt'">Zoom Out</BuilderSelectItem>
                    <BuilderSelectItem actionValue="'dolly_zoom'" id="'hover_effect_dolly_zoom_opt'">Dolly Zoom</BuilderSelectItem>
                    <BuilderSelectItem actionValue="'outline'" id="'hover_effect_outline_opt'">Outline</BuilderSelectItem>
                    <BuilderSelectItem actionValue="'image_mirror_blur'" id="'hover_effect_mirror_blur_opt'">Mirror Blur</BuilderSelectItem>
                </BuilderSelect>
            </BuilderRow>
            <BuilderRow label.translate="Intensity" level="2">
                <BuilderRange action="'setHoverEffectIntensity'"
                    t-if="this.isActiveItems(['hover_effect_zoom_in_opt', 'hover_effect_zoom_out_opt', 'hover_effect_mirror_blur_opt', 'hover_effect_dolly_zoom_opt'])"
                    preview="false" min="1" max="100" step="1" displayRangeValue="true"/>
            </BuilderRow>
            <t t-if="this.isActiveItems(['hover_effect_zoom_in_opt', 'hover_effect_zoom_out_opt', 'hover_effect_dolly_zoom_opt'])" t-set="color_label">Overlay</t>
            <t t-else="" t-set="color_label">Color</t>
            <BuilderRow label="color_label" level="2">
                <BuilderColorPicker action="'setHoverEffectColor'"
                    enabledTabs="['custom']"
                    t-if="this.isActiveItems(['hover_effect_dolly_zoom_opt', 'hover_effect_overlay_opt', 'hover_effect_zoom_in_opt', 'hover_effect_zoom_out_opt', 'hover_effect_outline_opt'])"
                    preview="false"
                    id="'hover_effect_color_opt'"/>
            </BuilderRow>
            <BuilderRow label.translate="Stroke Width" level="2">
                <BuilderNumberInput action="'setHoverEffectStrokeWidth'"
                    t-if="this.isActiveItem('hover_effect_outline_opt')"
                    step="1" min="1" unit="'px'" preview="false"/>
            </BuilderRow>
        </t>
    </t>
</t>


</templates>
