<templates>
  <t t-name="o-spreadsheet-SeriesDesignEditor">
    <SidePanelCollapsible isInitiallyCollapsed="true" title.translate="Data Series">
      <t t-set-slot="content">
        <Section class="'pt-0 pb-0'">
          <Select
            selectedValue="this.state.dataSetId"
            values="this.selectOptions"
            class="'data-series-selector'"
            onChange.bind="this.updateEditedSeries"
          />
          <Section class="'px-0'">
            <div class="d-flex align-items-center">
              <span class="o-section-title mb-0 pe-2">Series color</span>
              <RoundColorPicker
                currentColor="this.getDataSeriesColor()"
                onColorPicked.bind="this.updateDataSeriesColor"
              />
            </div>
          </Section>
          <Section class="'pt-0 px-0'" title.translate="Series name">
            <input
              class="o-input o-serie-label-editor"
              type="text"
              t-att-value="this.getDataSeriesLabel()"
              t-on-change="(ev) => this.updateDataSeriesLabel(ev)"
            />
          </Section>
        </Section>
        <t t-call-slot="data-series-extension" dataSetId="this.state.dataSetId"/>
      </t>
    </SidePanelCollapsible>
  </t>
</templates>
