@if (edge && component) {
  <ion-header>
    <ion-toolbar style="--background: var(--ion-color-toolbar-primary);">
      <ion-title style="color: var(--ion-title-color);">{{ component.alias }}</ion-title>
      <ion-buttons style="color: var(--ion-color-toggle-background);" slot="end">
        <ion-button [routerLink]="'/device/' + edge.id + newNavigationUrlSegment + '/history'">
          <ion-icon name="close-outline" style="color: var(--ion-title-color);"></ion-icon>
        </ion-button>
      </ion-buttons>
    </ion-toolbar>
    <ion-toolbar color="secondary">
      <ion-buttons class="ion-justify-content-center">
        <pickdate></pickdate>
      </ion-buttons>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-card-content>
      <delayedselltogridgchart [componentId]="component.id" [period]="service.historyPeriod.value">
      </delayedselltogridgchart>
    </ion-card-content>
  </ion-content>
}