<templates>
  <t t-name="o-spreadsheet-BubbleChartConfigPanel">
    <div>
      <ChartDataSeries
        ranges="this.getDataSeriesRanges()"
        dataSetStyles="{}"
        onSelectionChanged.bind="this.onDataSeriesRangesChanged"
        onSelectionConfirmed.bind="this.onDataSeriesConfirmed"
        onSelectionReordered.bind="this.onDataSeriesReordered"
        onSelectionRemoved.bind="this.onDataSeriesRemoved"
        maxNumberOfUsedRanges="this.maxNumberOfUsedRanges"
        datasetOrientation="this.datasetOrientation"
        canChangeDatasetOrientation="false"
      />
      <ChartLabelRange
        title.translate="Horizontal axis values"
        range="this.xRange || ''"
        isInvalid="this.isXDataInvalid"
        onSelectionChanged.bind="this.onXDataRangeChanged"
        onSelectionConfirmed.bind="this.onXDataRangeConfirmed"
        class="'pt-0'"
      />
      <ChartLabelRange
        title.translate="Bubble labels"
        range="this.labelRange || ''"
        isInvalid="this.isLabelInvalid"
        onSelectionChanged.bind="this.onLabelRangeChanged"
        onSelectionConfirmed.bind="this.onLabelRangeConfirmed"
        class="'pt-0'"
      />
      <ChartLabelRange
        title.translate="Bubble sizes"
        range="this.sizeRange || ''"
        isInvalid="this.isBubbleSizeRangeInvalid"
        onSelectionChanged.bind="this.onBubbleSizeRangeChanged"
        onSelectionConfirmed.bind="this.onBubbleSizeRangeConfirmed"
        class="'pt-0'"
        options="this.getLabelRangeOptions()"
      />

      <ChartErrorSection t-if="this.errorMessages.length" messages="this.errorMessages"/>
    </div>
  </t>
</templates>
