<templates>
  <t t-name="o-spreadsheet.ChartDataSeries">
    <Section class="'o-data-series'">
      <t t-set-slot="title">
        <div class="d-flex flex-row justify-content-between">
          <t t-out="this.title"/>
          <div
            t-if="this.props.onFlipAxis and this.props.canChangeDatasetOrientation"
            class="d-flex">
            <span
              t-if="this.props.datasetOrientation !== 'rows'"
              title="Split dataset by rows"
              t-on-click="(ev) => this.props.onFlipAxis('rows')"
              class="p-1 o-hoverable-button o-split-by-rows">
              <t t-call="o-spreadsheet-Icon.INSERT_ROW_BEFORE"/>
            </span>
            <span
              t-else=""
              title="Split dataset by columns"
              t-on-click="(ev) => this.props.onFlipAxis('columns')"
              class="p-1 o-hoverable-button o-split-by-columns">
              <t t-call="o-spreadsheet-Icon.INSERT_COL_BEFORE"/>
            </span>
          </div>
        </div>
      </t>
      <SelectionInput
        ranges="this.ranges"
        required="true"
        hasSingleRange="this.props.hasSingleRange"
        onSelectionChanged="this.props.onSelectionChanged"
        onSelectionConfirmed="this.props.onSelectionConfirmed"
        onSelectionReordered="this.props.onSelectionReordered"
        onSelectionRemoved="this.props.onSelectionRemoved"
        colors="this.colors"
        disabledRanges="this.disabledRanges"
        disabledRangeTitle.translate="Excluded due to chart limits. Drag to swap with another range."
      />
    </Section>
  </t>
</templates>
