<templates>
  <t t-name="o-spreadsheet-ColorPicker">
    <Popover t-props="this.popoverProps">
      <div class="o-color-picker" t-on-click.stop="" t-att-style="this.colorPickerStyle">
        <div class="o-color-picker-section-name">Standard</div>
        <div class="colors-grid">
          <div
            t-foreach="this.COLORS"
            t-as="color"
            t-key="color"
            class="o-color-picker-line-item os-theme-dependant"
            t-att-data-color="color"
            t-on-click="() => this.onColorClick(color)"
            t-attf-style="background-color:{{color}};">
            <div
              t-if="this.isSameColor(this.props.currentColor, color)"
              align="center"
              t-attf-style="color:{{this.checkmarkColor}}">
              ✓
            </div>
          </div>
        </div>
        <div class="o-separator border-bottom"/>
        <div
          class="o-color-picker-section-name o-color-picker-toggler"
          t-on-click="this.toggleColorPicker">
          <span>Custom</span>
        </div>
        <div class="colors-grid o-color-picker-toggler" t-on-click.stop="this.toggleColorPicker">
          <div
            t-foreach="this.env.model.getters.getCustomColors()"
            t-as="color"
            t-key="color"
            class="o-color-picker-line-item os-theme-dependant"
            t-att-data-color="color"
            t-attf-style="background-color:{{color}};"
            t-on-click.stop="() => this.onColorClick(color)">
            <div
              t-if="this.isSameColor(this.props.currentColor, color)"
              align="center"
              t-attf-style="color:{{this.checkmarkColor}}">
              ✓
            </div>
          </div>
          <div class="o-color-picker-line-item bg-white o-color-picker-toggler-button">
            <div class="o-color-picker-toggler-sign">
              <t t-call="o-spreadsheet-Icon.PLUS"/>
            </div>
          </div>
          <div
            class="eyedropper d-flex align-items-center justify-content-center rounded-circle"
            t-if="this.canUseEyeDropper"
            t-on-click.stop="this.activateEyedropper">
            <i class="oi" data-icon="colorize"/>
          </div>
        </div>
        <div t-if="this.state.showGradient" class="o-custom-selector">
          <div
            class="o-gradient os-theme-dependant"
            t-on-click.stop=""
            t-on-pointerdown="this.dragGradientPointer"
            t-att-style="this.gradientHueStyle">
            <div class="saturation w-100 h-100 position-absolute pe-none"/>
            <div class="lightness w-100 h-100 position-absolute pe-none"/>
            <div class="magnifier pe-none" t-att-style="this.pointerStyle"/>
          </div>
          <div class="o-hue-container" t-on-pointerdown="this.dragHuePointer">
            <div class="o-hue-picker border rounded" t-on-click.stop=""/>
            <div class="o-hue-slider pe-none os-theme-dependant" t-att-style="this.sliderStyle">
              <t t-call="o-spreadsheet-Icon.CARET_UP"/>
            </div>
          </div>
          <div class="o-custom-input-preview">
            <input
              type="text"
              class="border rounded"
              t-att-class="{'o-wrong-color': !this.isHexColorInputValid }"
              t-on-click.stop=""
              t-att-value="this.state.customHexColor"
              t-on-input="this.setHexColor"
            />
            <div
              class="o-color-preview border rounded os-theme-dependant"
              t-att-style="this.colorPreviewStyle"
            />
          </div>
          <div class="o-custom-input-buttons">
            <button
              class="o-add-button border rounded"
              t-att-class="{'o-disabled': !this.state.customHexColor or !this.isHexColorInputValid}"
              t-on-click.stop="this.addCustomColor">
              Add
            </button>
          </div>
        </div>
        <t t-if="!this.props.disableNoColor">
          <div class="o-separator border-bottom"/>
          <div class="o-buttons">
            <button t-on-click="this.resetColor" class="o-cancel border rounded">No Color</button>
          </div>
        </t>
      </div>
    </Popover>
  </t>
</templates>
