<div>
  <br/>
  <div class="gf-form">
    <h6>Thresholds
      <tip>Evaluates to state if value is greater than or equal to specified threshold. Values below and equal to T1 use state of T1.</tip>
    </h6>
  </div>
  <div class="gf-form" ng-repeat="threshold in ctrl.thresholds track by $index">
    <div class="gf-form">
      <label class="gf-form-label width-3">T{{$index+1}}</label>
      <input type="number" class="gf-form-input width-5" ng-model="threshold.value" ng-blur="ctrl.sortThresholds()">
    </div>
    <div class="gf-form">
      <label class="gf-form-label width-7">Color Mode</label>
      <span class="gf-form-select-wrapper width-8">
        <select class="gf-form-input"
          ng-model="threshold.state"
          ng-options="f.value as f.text for f in ctrl.thresholdStates"
          ng-change="ctrl.updateThresholdColor(threshold)">
        </select>
      </span>
    </div>
    <div class="gf-form">
      <label class="gf-form-label">Color</label>
      <span class="gf-form-label">
        <spectrum-picker ng-model="threshold.color" ng-change="ctrl.setThresholdColor(threshold)"></spectrum-picker>
      </span>
      <label class="gf-form-label">
        <i class="fa fa-trash pointer" ng-click="ctrl.removeThreshold(threshold)"></i>
      </label>  
    </div>
  </div>
  <div>
    <button class="btn btn-inverse width-10" ng-click="ctrl.addThreshold()">
      <i class="fa fa-plus"></i>&nbsp;Add Threshold
    </button>
  </div>
  <br/>
</div>
