<div class="editor-row">
  <div class="gf-form-group">
    <div class="gf-form">
        <span class="gf-form-label">
          Type
        </span>
        <div class="gf-form-select-wrapper">
          <select class="gf-form-input" ng-model="ctrl.panel.mappingType"
            ng-options="f.value as f.text for f in ctrl.mappingTypes" ng-change="ctrl.render()">
          </select>
        </div>
    </div>
  </div>
</div>
<div class="editor-row" ng-if="ctrl.panel.mappingType==1">
  <h5 class="page-heading">Set value mappings</h5>
  <div class="gf-form-group">
    <div class="gf-form" ng-repeat="map in ctrl.panel.valueMaps track by $index">
      <span class="gf-form-label">
        <i class="fa fa-remove pointer" ng-click="ctrl.removeValueMap(map)"></i>
      </span>
      <input type="text" ng-model="map.value" placeholder="value" class="gf-form-input max-width-6" ng-blur="ctrl.render()">
      <span class="gf-form-label">
        <i class="fa fa-arrow-right"></i>
      </span>
      <input type="text" placeholder="text" ng-model="map.text" class="gf-form-input max-width-8" ng-blur="ctrl.render()">
    </div>

    <div class="gf-form-button-row">
      <button class="btn btn-inverse" ng-click="ctrl.addValueMap();">
        <i class="fa fa-plus"></i>
        Add a value mapping
      </button>
    </div>
  </div>
</div>
<div class="editor-row" ng-if="ctrl.panel.mappingType==2">
  <h5 class="page-heading">Set range mappings</h5>
  <div class="gf-form-group">
    <div class="gf-form" ng-repeat="rangeMap in ctrl.panel.rangeMaps track by $index">
        <span class="gf-form-label">
          <i class="fa fa-remove pointer" ng-click="ctrl.removeRangeMap(rangeMap)"></i>
        </span>
        <span class="gf-form-label">From</span>
        <input type="text" ng-model="rangeMap.from" class="gf-form-input max-width-6" ng-blur="ctrl.render()">
        <span class="gf-form-label">To</span>
        <input type="text" ng-model="rangeMap.to" class="gf-form-input max-width-6" ng-blur="ctrl.render()">
        <span class="gf-form-label">Text</span>
        <input type="text" ng-model="rangeMap.text" class="gf-form-input max-width-8" ng-blur="ctrl.render()">
    </div>

    <div class="gf-form-button-row">
      <button class="btn btn-inverse" ng-click="ctrl.addRangeMap()">
        <i class="fa fa-plus"></i>
        Add a range mapping
      </button>
    </div>
  </div>
</div>
