<section class="grafana-metric-options gf-form-group">
  <div class="gf-form-inline">
    <div class="gf-form max-width-15">
      <span class="gf-form-label">Max data points</span>
      <input type="text"
        class="gf-form-input"
        ng-model="ctrl.panelCtrl.panel.maxDataPoints"
        bs-tooltip="'Override max data points, automatically set to graph width in pixels.'"
        data-placement="right"
        ng-model-onblur ng-change="ctrl.panelCtrl.refresh()"
        spellcheck='false'
        placeholder="auto">
      </input>
    </div>
  </div>
  <div class="gf-form-inline">
    <div class="gf-form">
      <span class="gf-form-label width-10">
        <i class="fa fa-info-circle"></i>
        <a ng-click="ctrl.panelCtrl.toggleEditorHelp(1);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
          Max data points
        </a>
      </span>
      <span class="gf-form-label width-10">
        <i class="fa fa-info-circle"></i>
        <a ng-click="ctrl.panelCtrl.toggleEditorHelp(2);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
          IT services
        </a>
      </span>
      <span class="gf-form-label width-12">
        <i class="fa fa-info-circle"></i>
        <a ng-click="ctrl.panelCtrl.toggleEditorHelp(3)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
          IT service property
        </a>
      </span>
      <span class="gf-form-label width-8">
        <i class="fa fa-info-circle"></i>
        <a ng-click="ctrl.panelCtrl.toggleEditorHelp(4)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
          Text filter
        </a>
      </span>
    </div>
  </div>
</section>

<div class="editor-row">
  <div class="pull-left">

    <div class="grafana-info-box span8" ng-if="ctrl.panelCtrl.editorHelpIndex === 1">
      <h5>Max data points</h5>
      <ul>
        <li>Grafana-Zabbix plugin uses maxDataPoints parameter to consolidate the real number of values down to this
          number
        </li>
        <li>If there are more real values, then by default they will be consolidated using averages</li>
        <li>This could hide real peaks and max values in your series</li>
        <li>Point consolidation will effect series legend values (min,max,total,current)</li>
        <li>If you override maxDataPoint and set a high value performance can be severely effected</li>
      </ul>
    </div>

    <div class="grafana-info-box span8" ng-if="ctrl.panelCtrl.editorHelpIndex === 2">
      <h5>IT services</h5>
      <ul>
        <li>Select "IT services" in targets menu to activate IT services mode.</li>
      </ul>
    </div>

    <div class="grafana-info-box span8" ng-if="ctrl.panelCtrl.editorHelpIndex === 3">
      <h5>IT service property</h5>
      <ul>
        <li>Zabbix returns the following availability information about IT service</li>
        <li>Status - current status of the IT service</li>
        <li>SLA - SLA for the given time interval</li>
        <li>OK time - time the service was in OK state, in seconds</li>
        <li>Problem time - time the service was in problem state, in seconds</li>
        <li>Down time - time the service was in scheduled downtime, in seconds</li>
      </ul>
    </div>

    <div class="grafana-info-box span8" ng-if="ctrl.panelCtrl.editorHelpIndex === 4">
      <h5>Text filter</h5>
      <ul>
        <li>Use regex to extract a part of the returned value.</li>
      </ul>
    </div>
  </div>
</div>
