@if (edge?.currentData | async; as currentData) {
  @if (navigationService.position() === 'bottom') {
    <!-- Hide ion-card with bottom navigation -->
    <ion-item lines="none">
      <energymonitor-chart class="ion-margin-bottom" [currentData]="currentData"></energymonitor-chart>
    </ion-item>
  } @else {
    <ion-card>
      <ion-item lines="full" style="--background: var(--ion-background-color-card-header)">
        <ion-icon size="large" slot="start" name="laptop-outline" color="normal"></ion-icon>
        <ion-label>
          {{"EDGE.INDEX.ENERGYMONITOR.TITLE" | translate}}
        </ion-label>
      </ion-item>
      <ion-card-content>
        <energymonitor-chart [currentData]="currentData"></energymonitor-chart>
      </ion-card-content>
    </ion-card>
  }
}