<templates>
  <t t-name="o-spreadsheet-AxisDesignEditor">
    <t t-set="editor_label">Axis title</t>
    <Section class="'py-0'">
      <BadgeSelection
        choices="this.badgeAxes"
        onChange.bind="(value) => this.state.currentAxis = value"
        selectedValue="this.state.currentAxis"
      />
    </Section>
    <ChartTitle
      title="this.getAxisTitle()"
      updateTitle.bind="this.updateAxisTitle"
      updateStyle.bind="this.updateAxisTitleStyle"
      name="editor_label"
      style="this.axisTitleStyle"
      placeholder.translate="Add a Title"
      defaultStyle="{align: 'center', color: '', fontSize: this.defaultFontSize}"
    />
    <Section
      t-if="!this.isCategoricalAxis"
      class="'pt-0 o-axis-bounds-section'"
      title.translate="Axis range">
      <div class="d-flex">
        <div class="w-50">
          <span class="o-section-subtitle my-0">Minimum</span>
          <DateInput
            t-if="this.isTimeAxis"
            class="'o-input w-100 time-axis-min-input'"
            value="this.axisMin"
            onChange.bind="this.updateTimeAxisMin"
          />
          <NumberInput
            t-else=""
            class="'o-input w-100 axis-min-input'"
            value="this.axisMin"
            onChange.bind="this.updateAxisMin"
            placeholder.translate="Lower bound value"
          />
        </div>
        <div class="w-50 ms-3">
          <span class="o-section-subtitle my-0">Maximum</span>
          <DateInput
            t-if="this.isTimeAxis"
            class="'o-input w-100 time-axis-max-input'"
            value="this.axisMax"
            onChange.bind="this.updateTimeAxisMax"
          />
          <NumberInput
            t-else=""
            class="'o-input w-100 axis-max-input'"
            value="this.axisMax"
            onChange.bind="this.updateAxisMax"
            placeholder.translate="Upper bound value"
          />
        </div>
      </div>
    </Section>
    <Section class="'pt-0'" t-if="!this.isCategoricalAxis" title.translate="Gridlines">
      <Checkbox
        className="'o-axis-grid-major'"
        label="this.majorGridLabel"
        value="this.isMajorGridEnabled"
        onChange.bind="this.toggleMajorGrid"
      />
      <Checkbox
        className="'o-axis-grid-minor'"
        label="this.minorGridLabel"
        value="this.isMinorGridEnabled"
        onChange.bind="this.toggleMinorGrid"
      />
    </Section>
  </t>
</templates>
