<div ng-controller="measurementsCtrl as ctrl">
  <c8y-ui-action-bar-set>
    <c8y-realtime-switch state="ctrl.realtime"></c8y-realtime-switch>
  </c8y-ui-action-bar-set>

  <c8y-list-pagination
    items="supportedMeasurements"
    page-size="10"
  >
    <c8y-list-pagination-control></c8y-list-pagination-control>
    <div
      class="card"
      ng-repeat="m in pag.items | limitTo:pagination.pageSize:pagination.options[pagination.page-1].startFrom"
      ng-init="filters[$index] = {}"
    >
      <div class="card-header separator">
        <div class="card-title">{{ m | humanize2 }}</div>
      </div>
      <div class="card-block measurements-tab">
        <c8y-measurements-fragment-chart
          fragment="m"
          device="deviceId"
          date-from="filters[$index].dateFrom"
          date-to="filters[$index].dateTo"
          realtime="ctrl.realtime"
          hide-realtime-button="true"
        ></c8y-measurements-fragment-chart>
      </div>
    </div>
  </c8y-list-pagination>

  <!-- empty state -->
  <div
    class="c8y-empty-state"
    ng-class="{ 'text-center m-t-40': !$parent.child.templateUrl }"
    ng-show="supportedMeasurements.length === 0"
  >
    <h1
      class="c8y-icon c8y-icon-duocolor dlt-c8y-icon-line-chart"
      aria-label="{{ 'Icon' | translate }}"
    ></h1>
    <div
      class="h3"
      ng-show="!$parent.child.templateUrl"
      translate
    >
      No measurements to display.
    </div>
    <p
      ng-show="$parent.child.templateUrl"
      translate
    >
      No measurements to display.
    </p>
    <p c8y-guide-docs>
      <small translate>
        Find out more in the
        <a
          c8y-guide-href="/docs/device-management-application/viewing-device-details/#measurements"
        >
          user documentation
        </a>
        .
      </small>
    </p>
  </div>
</div>
