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

            <div class="align-items-center d-flex justify-content-between my-2 o_type_row">
                Type
                <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>
                </span>
            </div>

            <div t-if="this.state.type === 'linear'" 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}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="0"
                            max="360"
                            t-att-value="this.state.angle"
                            t-on-change="onAngleChange"
                        />
                        <label class="flex-grow-0 ms-1 mb-0">deg</label>
                    </div>
                </span>
            </div>
            <div t-else="" class="d-flex flex-column gap-1 mb-1">
                Size
                <div class="d-flex align-items-center justify-content-between">
                    <button t-on-click="() => this.onSizeChange('closest-side')" t-attf-class="btn btn-light p-0 {{ this.state.size === 'closest-side' ? `active` : ''}}" title="Extend to the closest side">
                        <svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="0 0 16 20" fill="none">
                            <rect x="1.5" y="3.5" width="13" height="13" stroke="#AAAAAD"></rect>
                            <path d="M3 4H9V8C9 8.55228 8.55228 9 8 9H4C3.44772 9 3 8.55228 3 8V4Z" fill="#8C8C92"></path>
                            <path d="M6 11C7.65685 11 9 9.65685 9 8C9 6.34315 7.65685 5 6 5C4.34315 5 3 6.34315 3 8C3 9.65685 4.34315 11 6 11Z" fill="#74747B"></path>
                            <path d="M6 10C7.10457 10 8 9.10457 8 8C8 6.89543 7.10457 6 6 6C4.89543 6 4 6.89543 4 8C4 9.10457 4.89543 10 6 10Z" fill="white"></path>
                            <rect x="2" y="3" width="12" height="1" fill="white"></rect>
                        </svg>
                    </button>
                    <button t-on-click="() => this.onSizeChange('closest-corner')" t-attf-class="btn btn-light p-0 {{ this.state.size === 'closest-corner' ? `active` : ''}}" title="Extend to the closest corner">
                        <svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="0 0 16 20" fill="none">
                            <rect x="1.5" y="3.5" width="13" height="13" stroke="#AAAAAD"></rect>
                            <path d="M2 4H9V7C9 9.20914 7.20914 11 5 11H2V4Z" fill="#8C8C92"></path>
                            <path d="M6 11C7.65685 11 9 9.65685 9 8C9 6.34315 7.65685 5 6 5C4.34315 5 3 6.34315 3 8C3 9.65685 4.34315 11 6 11Z" fill="#74747B"></path>
                            <path d="M6 10C7.10457 10 8 9.10457 8 8C8 6.89543 7.10457 6 6 6C4.89543 6 4 6.89543 4 8C4 9.10457 4.89543 10 6 10Z" fill="white"></path>
                            <rect x="1" y="3" width="8" height="1" fill="white"></rect>
                            <rect x="1" y="11" width="8" height="1" transform="rotate(-90 1 11)" fill="white"></rect>
                        </svg>
                    </button>
                    <button t-on-click="() => this.onSizeChange('farthest-side')" t-attf-class="btn btn-light p-0 {{ this.state.size === 'farthest-side' ? `active` : ''}}" title="Extend to the farthest side">
                        <svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="0 0 16 20" fill="none">
                            <rect x="1.5" y="3.5" width="13" height="13" stroke="#AAAAAD"></rect>
                            <path d="M7 12C10.3137 12 14 10.2091 14 8C14 5.79086 10.3137 4 7 4C3.68629 4 2 5.79086 2 8C2 10.2091 3.68629 12 7 12Z" fill="#8C8C92"></path>
                            <path d="M6 11C7.65685 11 9 9.65685 9 8C9 6.34315 7.65685 5 6 5C4.34315 5 3 6.34315 3 8C3 9.65685 4.34315 11 6 11Z" fill="#74747B"></path>
                            <path d="M6 10C7.10457 10 8 9.10457 8 8C8 6.89543 7.10457 6 6 6C4.89543 6 4 6.89543 4 8C4 9.10457 4.89543 10 6 10Z" fill="white"></path>
                            <rect x="14" y="4" width="1" height="12" fill="white"></rect>
                        </svg>
                    </button>
                    <button t-on-click="() => this.onSizeChange('farthest-corner')" t-attf-class="btn btn-light p-0 {{ this.state.size === 'farthest-corner' ? `active` : ''}}" title="Extend to the farthest corner">
                        <svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="0 0 16 20" fill="none">
                            <rect x="1.5" y="3.5" width="13" height="13" stroke="#AAAAAD"></rect>
                            <path d="M2 4H14V10C14 13.3137 11.3137 16 8 16H2V4Z" fill="#8C8C92"></path>
                            <path d="M6 11C7.65685 11 9 9.65685 9 8C9 6.34315 7.65685 5 6 5C4.34315 5 3 6.34315 3 8C3 9.65685 4.34315 11 6 11Z" fill="#74747B"></path>
                            <path d="M6 10C7.10457 10 8 9.10457 8 8C8 6.89543 7.10457 6 6 6C4.89543 6 4 6.89543 4 8C4 9.10457 4.89543 10 6 10Z" fill="white"></path>
                            <rect x="15" y="17" width="7" height="0.999999" transform="rotate(-180 15 17)" fill="white"></rect>
                            <rect x="15" y="10" width="7" height="1" transform="rotate(90 15 10)" fill="white"></rect>
                        </svg>
                    </button>
                </div>
                <div class="d-flex align-items-center justify-content-between">
                    Position X
                    <span class="o_color_gradient_input">
                        <input
                            name="positionX"
                            type="number"
                            min="0"
                            max="100"
                            t-att-value="this.positions['x']"
                            t-on-change="(ev) => this.onPositionChange('x', ev)"
                        />
                    </span>
                </div>
                <div class="d-flex align-items-center justify-content-between">
                    Position Y
                    <span class="o_color_gradient_input">
                        <input
                            name="positionY"
                            type="number"
                            min="0"
                            max="100"
                            t-att-value="this.positions['y']"
                            t-on-change="(ev) => this.onPositionChange('y', ev)"
                        />
                    </span>
                </div>
            </div>

            <div class="custom-gradient-configurator">
                 <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-click="() => this.state.currentColorIndex = color_index"
                               t-on-change="(ev) => this.onColorPercentageChange(color_index, ev)" />
                    </div>
                </div>
                <div class="gradient-color-bin">
                    <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"><i class="fa fa-fw fa-trash" role="img"/></a>
                    </t>
                </div>
            </div>

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