<templates xml:space="preserve">
    <t t-name="html_editor.GradientPicker">
        <div class="d-flex flex-column" t-on-keydown="onKeydown">

            <div class="align-items-center d-flex justify-content-between my-3 o_type_row">
                Type
                <t t-if="isMobileOS">
                    <Dropdown>
                        <button class="btn btn-light d-flex justify-content-between w-100 ms-2 border border-dark rounded-0">
                            <span class="px-1" t-esc="this.state.type"/>
                            <i class="fa fa-caret-down ms-2"/>
                        </button>
                        <t t-set-slot="content">
                            <DropdownItem onSelected="() => this.selectType('linear')">
                                Linear
                            </DropdownItem>
                            <DropdownItem onSelected="() => this.selectType('radial')">
                                Radial
                            </DropdownItem>
                            <DropdownItem onSelected="() => this.selectType('conic')">
                                Conic
                            </DropdownItem>
                        </t>
                    </Dropdown>
                </t>
                <t t-else="">
                    <span class="d-flex justify-content-between">
                        <button t-attf-class="btn btn-sm btn-light {{ this.state.type === 'linear' ? 'active' : ''}}" t-on-click="() => this.selectType('linear')"> Linear </button>
                        <button t-attf-class="btn btn-sm btn-light {{ this.state.type === 'radial' ? 'active' : ''}}" t-on-click="() => this.selectType('radial')"> Radial </button>
                        <button t-attf-class="btn btn-sm btn-light {{ this.state.type === 'conic' ? 'active' : ''}}" t-on-click="() => this.selectType('conic')"> Conic </button>
                    </span>
                </t>
            </div>

            <div t-if="this.state.type === 'radial'">
                <div class="d-flex flex-column gap-1 mb-1 me-n1">
                    <div class="d-flex align-items-center justify-content-between" t-on-mouseover="props.onColorPointerOver" t-on-mouseout="props.onColorPointerOut">
                        <div style="margin-right: auto;">
                            Size
                        </div>
                        <button t-on-click="() => this.onSizeChange('closest-side')" t-att-data-color="getRadialGradient('closest-side')" t-attf-class="btn btn-light p-0 {{ this.state.size === 'closest-side' ? `active` : ''}}" title="Extend to the closest side">
                            <img src="/html_editor/static/src/img/gradient-closest-side.svg"/>
                        </button>
                        <button t-on-click="() => this.onSizeChange('closest-corner')" t-att-data-color="getRadialGradient('closest-corner')" t-attf-class="btn btn-light p-0 {{ this.state.size === 'closest-corner' ? `active` : ''}}" title="Extend to the closest corner">
                            <img src="/html_editor/static/src/img/gradient-closest-corner.svg"/>
                        </button>
                        <button t-on-click="() => this.onSizeChange('farthest-side')" t-att-data-color="getRadialGradient('farthest-side')" t-attf-class="btn btn-light p-0 {{ this.state.size === 'farthest-side' ? `active` : ''}}" title="Extend to the farthest side">
                            <img src="/html_editor/static/src/img/gradient-farthest-side.svg"/>
                        </button>
                        <button t-on-click="() => this.onSizeChange('farthest-corner')" t-att-data-color="getRadialGradient('farthest-corner')" t-attf-class="btn btn-light p-0 {{ this.state.size === 'farthest-corner' ? `active`: ''}}" title="Extend to the farthest corner">
                            <img src="/html_editor/static/src/img/gradient-farthest-corner.svg"/>
                        </button>
                    </div>
                </div>
            </div>
            <div t-if="this.state.type === 'linear' or this.state.type === 'conic'">
                <div class="d-flex align-items-center justify-content-between mb-1">
                    Angle
                    <span class="d-flex justify-content-between align-items-center">
                        <div class="d-flex justify-content-center align-items-center my-auto me-2 position-relative gradient-angle-knob"
                            t-ref="gradientAngleKnob"
                            t-attf-style="--angle: #{this.state.angle - 90}deg;"
                            t-on-mousedown="onKnobMouseDown">
                            <div class="position-absolute gradient-angle-thumb"></div>
                        </div>
                        <div class="o_color_gradient_input d-flex align-items-center">
                            <input
                                name="angle"
                                type="number"
                                min="-360"
                                max="360"
                                t-att-value="this.state.angle"
                                t-on-change="onAngleChange"
                            />
                            <span>deg</span>
                        </div>
                    </span>
                </div>
            </div>
            <div t-if="this.state.type === 'radial' or this.state.type === 'conic'">
                <div class="d-flex flex-column gap-1 mb-1">
                    <div class="d-flex align-items-center justify-content-between">
                        Position X
                        <div class="d-flex">
                            <span class="o_color_gradient_input">
                                <input
                                    name="positionX"
                                    type="number"
                                    min="-100"
                                    max="200"
                                    t-att-value="this.positions['x']"
                                    t-on-change="(ev) => this.onPositionChange('x', ev)"
                                />
                                <span>%</span>
                            </span>
                        </div>
                    </div>
                    <div class="d-flex align-items-center justify-content-between">
                        Position Y
                        <div class="d-flex">
                            <span class="o_color_gradient_input">
                                <input
                                    name="positionY"
                                    type="number"
                                    min="-100"
                                    max="200"
                                    t-att-value="this.positions['y']"
                                    t-on-change="(ev) => this.onPositionChange('y', ev)"
                                />
                                <span>%</span>
                            </span>
                            
                        </div>
                    </div>
                </div>
            </div>



            <div class="custom-gradient-configurator mt-3">
                <div class="mb-1 d-flex justify-content-between align-items-center">
                    Colors
                    <div class="d-flex align-items-center">
                        Repeating
                        <CheckBox className="'d-flex align-items-center justify-content-center o_field_boolean o_boolean_toggle form-switch'" onChange="this.onToggleRepeatingBound" value="this.state.repeating"/> 
                    </div>
                </div>
                <div class="gradient-checkers"></div>
                <div class="gradient-preview" 
                     t-attf-style="background-image: #{this.cssGradients.preview};"
                     t-on-click="this.onGradientPreviewClick" >
                </div>
                <style><t t-out="this.cssGradients.sliderThumbStyle" /></style>
                <div class="gradient-colors">
                    <div t-foreach="this.colors" t-as="color" t-key="color_index">
                        <input type="range" min="0" max="100" t-att-value="color.percentage"
                               t-att-class="{'active': this.state.currentColorIndex === color_index}"
                               t-attf-name="custom gradient percentage color #{color_index+1}"
                               t-on-change="(ev) => this.onColorPercentageChange(color_index, ev)" 
                               t-on-pointerdown="() => this.state.currentColorIndex = color_index"
                        />
                    </div>
                    <div class="position-relative text-white fw-bolder color-percentage pe-none d-flex justify-content-center" 
                         t-out="this.colors[this.state.currentColorIndex].percentage" 
                         t-attf-style="left: calc(#{this.colors[this.state.currentColorIndex].percentage}% - #{15 + 0.08*this.colors[this.state.currentColorIndex].percentage}px);"
                    />
                </div>
                <div class="gradient-color-bin position-relative">
                    <t t-if="this.colors.length > 2">
                        <a t-on-click="() => this.removeColor(this.state.currentColorIndex)"
                           t-attf-style="left: #{this.colors[this.state.currentColorIndex].percentage}%"
                           type="button" class="btn btn-sm btn-light position-absolute">
                           <i class="fa fa-fw fa-trash" role="img"/>
                        </a>
                    </t>
                </div>
            </div>

            <ColorPicker
                onColorSelect.bind="onColorChange"
                onColorPreview.bind="onColorPreview"
                defaultColor="this.currentColorHex"
                selectedColor="this.currentColorHex"
                noTransparency="props.noTransparency"
            />
        </div>
    </t>
</templates>
