<header>
  <mat-toolbar color="primary">
    <button mat-icon-button><mat-icon svgIcon="gns3"></mat-icon></button>

    <button mat-button routerLink="/servers">Servers</button>

    <button *ngIf="recentlyOpenedProjectId && recentlyOpenedServerId" mat-button routerLink="/server/{{recentlyOpenedServerId}}/project/{{recentlyOpenedProjectId}}">Back to project</button>

    <span class="fill-space"></span>

    <button mat-button [matMenuTriggerFor]="menu" >
      <mat-icon>more_vert</mat-icon>
    </button>

    <mat-menu #menu="matMenu">
      <button mat-menu-item routerLink="/settings">
        <mat-icon>settings</mat-icon>
        <span>Settings</span>
      </button>
      <button mat-menu-item routerLink="/installed-software" [disabled]="!isInstalledSoftwareAvailable">
        <mat-icon>cloud_download</mat-icon>
        <span>Installed software</span>
      </button>
      <button mat-menu-item routerLink="/help">
        <mat-icon>help</mat-icon>
        <span>Help</span>
      </button>
    </mat-menu>

  </mat-toolbar>
</header>

<main class="mat-app-background"><router-outlet></router-outlet></main>

<app-progress></app-progress>

<footer class="footer mat-app-background">
  GNS3 Web UI &copy; 2019 - v{{ uiVersion }}
</footer>
