<div
  class="graph-series-override"
  ng-repeat="override in ctrl.panel.seriesOverrides"
  ng-controller="SeriesOverridesCtrl"
>
  <div class="gf-form">
    <label class="gf-form-label">Alias or regex</label>
    <input
      type="text"
      ng-model="override.alias"
      bs-typeahead="getSeriesNames"
      ng-blur="ctrl.render()"
      data-min-length="0"
      data-items="100"
      class="gf-form-input width-15"
      placeholder="For regex use /pattern/"
    />
    <label class="gf-form-label pointer" ng-click="ctrl.removeSeriesOverride(override)">
      <icon name="'trash-alt'"></icon>
    </label>
  </div>
  <div class="graph-series-override__properties">
    <div class="gf-form" ng-repeat="option in currentOverrides">
      <label class="gf-form-label gf-form-label--grow">
        <span ng-show="option.propertyName === 'color'">
          Color: <icon name="'circle'" type="'mono'" ng-style="{color:option.value}"></icon>
        </span>
        <span ng-show="option.propertyName !== 'color'"> {{ option.name }}: {{ option.value }} </span>
        <icon
          name="'times'"
          size="'sm'"
          ng-click="removeOverride(option)"
          style="margin-right: 4px;cursor: pointer;"
        ></icon>
      </label>
    </div>
    <div class="gf-form">
      <span
        class="dropdown"
        dropdown-typeahead2="overrideMenu"
        dropdown-typeahead-on-select="setOverride($item, $subItem)"
        button-template-class="gf-form-label"
      ></span>
    </div>
  </div>
</div>
<div class="gf-form-button-row">
  <button class="btn btn-inverse" ng-click="ctrl.addSeriesOverride()">
    <icon name="'plus'"></icon>&nbsp;Add series override
  </button>
</div>
