<templates>
  <t t-name="o-spreadsheet-ColorPickerWidget">
    <div class="o-color-picker-widget">
      <span
        class="o-color-picker-button"
        t-ref="this.colorPickerButtonRef"
        t-on-click.stop="this.props.toggleColorPicker"
        t-att-title="this.props.title"
        t-att-class="this.props.class ? this.props.class : 'o-color-picker-button-style'"
        t-att-disabled="this.props.disabled">
        <div class="position-relative">
          <t t-call="{{this.props.icon}}"/>
          <div
            class="o-colored-border position-absolute bottom-0 w-100 os-theme-dependant"
            t-att-style="this.iconStyle"
          />
        </div>
      </span>
      <ColorPicker
        t-if="this.props.showColorPicker"
        anchorRect="this.colorPickerAnchorRect"
        onColorPicked="this.props.onColorPicked"
        currentColor="this.props.currentColor"
        maxHeight="this.props.dropdownMaxHeight"
      />
    </div>
  </t>
</templates>
