<div class="container" *ngIf="(healthResponseInitialised | async) && (healthInfoResponseInitialised | async)">
  <h1>{{'health-page.heading' | translate}}</h1>
  <div *ngIf="(healthResponse | async) && (healthInfoResponse | async)">
    <ul ngbNav #nav="ngbNav" [activeId]="'status'" class="nav-tabs">
      <li [ngbNavItem]="'status'" role="presentation">
        <a data-test="health-page.status-tab" ngbNavLink>{{'health-page.status-tab' | translate}}</a>
        <ng-template ngbNavContent>
          <div id="status">
            <ds-health-panel [healthResponse]="(healthResponse | async)"></ds-health-panel>
          </div>
        </ng-template>
      </li>
      <li [ngbNavItem]="'info'" role="presentation">
        <a data-test="health-page.info-tab" ngbNavLink>{{'health-page.info-tab' | translate}}</a>
        <ng-template ngbNavContent>
          <div id="info">
            <ds-health-info [healthInfoResponse]="(healthInfoResponse | async)"></ds-health-info>
          </div>
        </ng-template>
      </li>
    </ul>
    <div [ngbNavOutlet]="nav" class="mt-2"></div>
  </div>
  <ds-alert *ngIf="!(healthResponse | async) || !(healthInfoResponse | async)" [type]="AlertType.Error" [content]="'health-page.error.msg'"></ds-alert>
</div>


