<div class="measurement-icon-bar clearfix">
  <button
    class=" btn btn-link measurement-icon c8y-realtime asurement-realtime {{
      getRealtimeClassName()
    }}"
    type="button"
    aria-label="{{ getRealtimeIconText() | translate }}"
    uib-tooltip="{{ getRealtimeIconText() | translate }}"
    tooltip-placement="right"
    tooltip-popup-delay="500"
    tooltip-append-to-body="true"
    ng-show="showRealtime"
    ng-click="onRealtimeToggle()"
  >
    <!-- TODO: Fix hack
      change the function getRealtimeIconName to return 'active : inactive ' instead of icon name
    -->
    <span
      class="c8y-pulse"
      ng-class="{
        active: getRealtimeIconName() == 'check-circle-o',
        inactive: getRealtimeIconName() != 'check-circle-o'
      }"
    ></span>
  </button>

  <span ng-show="showAggregation" class="measurement-icon measurement-aggregation">
    <i
      c8y-icon="{{ getAggregationIconName() }}"
      uib-tooltip="{{ getAggregationIconText() | translate }}"
      tooltip-placement="right"
      tooltip-popup-delay="500"
      tooltip-append-to-body="true"
    ></i>
  </span>

  <button
    class="btn-help btn-help--sm"
    type="button"
    aria-label="{{ 'Help' | translate }}"
    uib-popover-html="'Drag X-Axis to move time.<br>Select time period to zoom.<br>Double click to zoom out.<br>Values in the Y-Axis may be truncated, hover over the values or the circle in the bottom to display whole values.' | translate"
    popover-placement="right"
    popover-trigger="'focus'"
    popover-append-to-body="true"
  ></button>

  <span ng-show="showLoading" class="measurement-icon measurement-loading">
    <i
      c8y-icon="circle-o-notch"
      class="icon-spin"
      uib-tooltip="{{ 'Loading…' | translate }}"
      tooltip-placement="bottom"
      tooltip-popup-delay="500"
      tooltip-append-to-body="true"
    ></i>
  </span>
</div>
