<div class="kuiSideBarSection kuiSideBarSection__main">
  <div class="kuiSideBarSectionTitle">
    <div
      class="kuiSideBarSectionTitle__text"
      i18n-id="kbnVislibVisTypes.controls.pointSeries.series.metricsTitle"
      i18n-default-message="Metrics"
    ></div>
  </div>

  <div
    ng-repeat="chart in editorState.params.seriesParams track by $index"
    class="kuiSideBarSection"
  >
    <div class="kuiSideBarCollapsibleTitle">
      <div
        ng-init="isSeriesOpen = ($index === 0)"
        class="kuiSideBarCollapsibleTitle__label"
        ng-click="isSeriesOpen = !isSeriesOpen"
        kbn-accessible-click
        aria-expanded="{{!!isSeriesOpen}}"
        aria-controls="visSeriesOptions{{$index}}"
        aria-label="Toggle {{chart.data.label}} options"
      >
        <span
          aria-hidden="true"
          ng-class="{ 'fa-caret-down': isSeriesOpen, 'fa-caret-right': !isSeriesOpen }"
          class="kuiIcon fa-caret-right kuiSideBarCollapsibleTitle__caret"
        ></span>
        <span class="kuiSideBarCollapsibleTitle__text">
          {{chart.data.label}}
        </span>
      </div>
    </div>

    <div id="visSeriesOptions{{$index}}" ng-show="isSeriesOpen" class="kuiSideBarCollapsibleSection">
      <!-- General -->
      <div class="kuiSideBarSection">

        <div class="kuiSideBarFormRow">
          <label
            class="kuiSideBarFormRow__label"
            for="{{ 'seriesType' + $index }}"
            i18n-id="kbnVislibVisTypes.controls.pointSeries.series.chartTypeLabel"
            i18n-default-message="Chart Type"
          ></label>
          <div class="kuiSideBarFormRow__control">
            <select
              id="{{ 'seriesType' + $index }}"
              class="kuiSelect kuiSideBarSelect"
              ng-model="chart.type"
              ng-options="mode.value as mode.text for mode in vis.type.editorConfig.collections.chartTypes"
            ></select>
          </div>
        </div>

        <div class="kuiSideBarFormRow">
          <label
            class="kuiSideBarFormRow__label"
            for="{{ 'seriesMode' + $index }}"
            i18n-id="kbnVislibVisTypes.controls.pointSeries.series.modeLabel"
            i18n-default-message="Mode"
          ></label>
          <div class="kuiSideBarFormRow__control">
            <select
              id="{{ 'seriesMode' + $index }}"
              class="kuiSelect kuiSideBarSelect"
              ng-model="chart.mode"
              ng-options="mode for mode in vis.type.editorConfig.collections.chartModes"
            ></select>
          </div>
        </div>

        <div class="kuiSideBarFormRow">
          <label
            class="kuiSideBarFormRow__label"
            for="{{ 'seriesValueAxis' + $index }}"
            i18n-id="kbnVislibVisTypes.controls.pointSeries.series.valueAxisLabel"
            i18n-default-message="Value Axis"
          ></label>
          <div class="kuiSideBarFormRow__control">
            <select
              id="{{ 'seriesValueAxis' + $index }}"
              class="kuiSelect kuiSideBarSelect"
              ng-model="chart.valueAxis"
              ng-change="changeValueAxis($index)"
            >
              <option ng-repeat="axis in editorState.params.valueAxes track by axis.id" value="{{axis.id}}">{{axis.name}}</option>
              <option
                value="new"
                i18n-id="kbnVislibVisTypes.controls.pointSeries.series.newAxisLabel"
                i18n-default-message="New Axis…"
              ></option>
            </select>
          </div>
        </div>

        <div ng-show="chart.type == 'line' || chart.type == 'area'">
          <div class="kuiSideBarFormRow">
            <label
              class="kuiSideBarFormRow__label"
              for="{{ 'lineMode' + $index }}"
              i18n-id="kbnVislibVisTypes.controls.pointSeries.series.lineModeLabel"
              i18n-default-message="Line Mode"
            ></label>
            <div class="kuiSideBarFormRow__control">
              <select
                id="{{ 'lineMode' + $index }}"
                class="kuiSelect kuiSideBarSelect"
                ng-model="chart.interpolate"
                ng-options="mode.value as mode.text for mode in vis.type.editorConfig.collections.interpolationModes"
              >
              </select>
            </div>
          </div>
        </div>
        <div ng-show="chart.type == 'line'">
          <div class="kuiSideBarFormRow">
            <label
              class="kuiSideBarFormRow__label"
              for="{{ 'drawLines' + $index }}"
              i18n-id="kbnVislibVisTypes.controls.pointSeries.series.showLineLabel"
              i18n-default-message="Show Line"
            ></label>
            <div class="kuiSideBarFormRow__control">
              <input class="kuiCheckBox" id="{{ 'drawLines' + $index }}" type="checkbox" ng-model="chart.drawLinesBetweenPoints">
            </div>
          </div>

          <div class="kuiSideBarFormRow">
            <label
              class="kuiSideBarFormRow__label"
              for="{{ 'showCircles' + $index }}"
              i18n-id="kbnVislibVisTypes.controls.pointSeries.series.showCirclesLabel"
              i18n-default-message="Show Circles"
            ></label>
            <div class="kuiSideBarFormRow__control">
              <input class="kuiCheckBox" id="{{ 'showCircles' + $index }}" type="checkbox" ng-model="chart.showCircles">
            </div>
          </div>

          <div class="kuiSideBarFormRow">
            <label
              class="kuiSideBarFormRow__label"
              i18n-id="kbnVislibVisTypes.controls.pointSeries.series.lineWidthLabel"
              i18n-default-message="Line Width"
            ></label>
            <div class="kuiSideBarFormRow__control">
              <input name="lineWidth"
                     class="kuiInput kuiSideBarInput"
                     type="number"
                     step="0.5"
                     ng-model="chart.lineWidth"
              >
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>

  <div style="height: 10px"></div>
</div>
