<templates>
  <t t-name="o-spreadsheet.TextStyler">
    <div
      class="o-chart-title-designer position-relative d-flex align-items-center"
      t-att-class="this.props.class">
      <ActionButton action="this.boldButtonAction" class="'o-hoverable-button'"/>
      <ActionButton action="this.italicButtonAction" class="'o-hoverable-button'"/>
      <div
        class="o-divider border-start"
        t-if="this.props.hasHorizontalAlign || this.props.hasVerticalAlign"
      />
      <div class="o-dropdown position-relative" t-if="this.props.hasHorizontalAlign">
        <ActionButton
          action="this.horizontalAlignButtonAction"
          hasTriangleDownIcon="true"
          t-on-click="(ev) => this.toggleDropdownTool('horizontalAlignTool', ev)"
          class="'o-hoverable-button'"
        />
        <div
          class="o-dropdown-content position-absolute top-100 start-0 bg-white"
          t-if="this.state.activeTool === 'horizontalAlignTool'"
          t-att-style="this.dropdownStyle"
          t-on-click.stop="">
          <div class="o-dropdown-line d-flex">
            <t t-foreach="this.horizontalAlignActions" t-as="action" t-key="action_index">
              <ActionButton action="action" class="'o-hoverable-button'"/>
            </t>
          </div>
        </div>
      </div>
      <div class="o-dropdown position-relative" t-if="this.props.hasVerticalAlign">
        <ActionButton
          action="this.verticalAlignButtonAction"
          hasTriangleDownIcon="true"
          t-on-click="(ev) => this.toggleDropdownTool('verticalAlignTool', ev)"
          class="'o-hoverable-button'"
        />
        <div
          class="o-dropdown-content position-absolute top-100 start-0 bg-white"
          t-if="this.state.activeTool === 'verticalAlignTool'"
          t-att-style="this.dropdownStyle"
          t-on-click.stop="">
          <div class="o-dropdown-line d-flex">
            <t t-foreach="this.verticalAlignActions" t-as="action" t-key="action_index">
              <ActionButton action="action" class="'o-hoverable-button'"/>
            </t>
          </div>
        </div>
      </div>
      <div class="o-divider border-start"/>
      <FontSizeEditor
        currentFontSize="this.currentFontSize"
        onFontSizeChanged.bind="this.updateFontSize"
        class="'o-hoverable-button'"
      />
      <div class="o-divider border-start"/>
      <ColorPickerWidget
        currentColor="this.props.style.color ?? this.props.defaultStyle?.color"
        toggleColorPicker="(ev) => this.toggleDropdownTool('fillChartColorTool', ev)"
        showColorPicker="this.state.activeTool === 'fillChartColorTool'"
        onColorPicked.bind="this.onTextColorChange"
        title.translate="Text color"
        icon="'o-spreadsheet-Icon.TEXT_COLOR'"
        class="'o-hoverable-button o-menu-item-button'"
      />
      <ColorPickerWidget
        t-if="this.props.hasBackgroundColor"
        currentColor="this.props.style.fillColor || this.props.defaultStyle?.fillColor"
        toggleColorPicker="(ev) => this.toggleDropdownTool('fillcolorTool', ev)"
        showColorPicker="this.state.activeTool === 'fillcolorTool'"
        onColorPicked.bind="this.onFillColorChange"
        title.translate="Fill color"
        icon="'o-spreadsheet-Icon.FILL_COLOR'"
        class="'o-hoverable-button o-menu-item-button'"
      />
    </div>
  </t>
</templates>
