<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <pwa-back-button></pwa-back-button>
    </ion-buttons>
    <ion-title>Monitor</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <skeleton-list *ngIf="loading; else loaded" groups="2"></skeleton-list>

  <ng-template #loaded>
    <ion-item-group *ngFor="let metricGroup of metrics | keyvalue : asIsOrder">
      <ion-item-divider>{{ metricGroup.key }}</ion-item-divider>
      <ion-item *ngFor="let metric of metricGroup.value | keyvalue : asIsOrder">
        <ion-label>{{ metric.key }}</ion-label>
        <ion-note *ngIf="metric.value" slot="end" class="metric-note">
          <ion-text style="color: white;">{{ metric.value.value }} {{ metric.value.unit }}</ion-text>
        </ion-note>
      </ion-item>
    </ion-item-group>
  </ng-template>

</ion-content>