<templates>
  <t t-name="o-spreadsheet-CalendarChartConfigPanel">
    <div>
      <ChartDataSourceComponent
        chartId="this.props.chartId"
        definition="this.props.definition"
        updateChart="this.props.updateChart"
        canUpdateChart="this.props.canUpdateChart"
        onErrorMessagesChanged.bind="this.onErrorMessagesChanged"
        getLabelRangeOptions="() => []"
        labelRangeTitle.translate="Date range"
      />

      <Section title.translate="Fields to group by">
        <div class="d-flex">
          <span class="w-100">Horizontal axis</span>
          <Select
            selectedValue="this.getGroupByType('horizontal') || ''"
            values="this.groupByChoices"
            class="'o-horizontal-group-by'"
            onChange="(value) => this.updateGroupBy('horizontal', value)"
          />
        </div>
        <div class="d-flex">
          <span class="w-100">Vertical axis</span>
          <Select
            selectedValue="this.getGroupByType('vertical') || ''"
            values="this.groupByChoices"
            class="'o-vertical-group-by'"
            onChange="(value) => this.updateGroupBy('vertical', value)"
          />
        </div>
      </Section>

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