<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="embassy"></ion-back-button>
    </ion-buttons>
    <ion-title>Monitor</ion-title>
    <ion-title slot="end"><ion-spinner name="dots" class="fader"></ion-spinner></ion-title>
  </ion-toolbar>
</ion-header>

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

  <div id="metricSection">
    <ng-container *ngIf="!loading">
      <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-container>
  </div>

</ion-content>