<mat-toolbar color="primary" class="navigation-bar row">
	<a class="col-auto app-logo" routerLink="/">
		<img [src]="'/assets/images/OpenDMP.png'" alt="openDMP" style="height: 2.5em;">
	</a>
	<div class="col-auto">
		<a mat-button class="buttonNav navbar-button" routerLink="/explore">{{'NAV-BAR.PUBLIC-DATASETS' | translate}}</a>
	</div>
	<div *ngIf="isAuthenticated()" class="col-auto">
		<!-- ----------- UNCOMMENT TO ADD AGAIN GRANTS -------- -->
		<!-- <a mat-button class="buttonNav navbar-button" routerLink="/grants">{{'NAV-BAR.GRANTS' |	translate}}</a> -->
		<a mat-button class="buttonNav navbar-button" routerLink="/plans">{{'NAV-BAR.DMPS' | translate}}</a>
		<a mat-button class="buttonNav navbar-button" routerLink="/datasets">{{'NAV-BAR.DATASETS' | translate}}</a>
		<a *ngIf="isAdmin()" mat-button class="buttonNav navbar-button" routerLink="/users">{{'NAV-BAR.USERS' | translate}}</a>
		<a *ngIf="isAdmin()" mat-button class="buttonNav navbar-button" routerLink="/dmp-profiles">{{'NAV-BAR.DMP-PROFILES' |
			translate}}</a>
		<a *ngIf="isAdmin()" mat-button class="buttonNav navbar-button" routerLink="/dataset-profiles">{{'NAV-BAR.DATASETS-ADMIN'
			| translate}}</a>
	</div>

	<!--<button mat-button class="navbar-button" routerLink="/about">{{'NAV-BAR.ABOUT' | translate}}</button>-->
	<!-- <app-search></app-search> -->

	<div *ngIf="isAuthenticated();else loginoption" class="col-auto">
		<img mat-card-avatar *ngIf="this.principalHasAvatar()" [src]="this.getPrincipalAvatar()" (click)="openProfile()">
		<img mat-card-avatar *ngIf="!this.principalHasAvatar()" [src]="this.getDefaultAvatar()" (click)="openProfile()">
	</div>

	<ng-template #loginoption>
		<button mat-button [routerLink]=" ['/login'] ">
			<span class="login-label">Log in</span>
		</button>
	</ng-template>
</mat-toolbar>
<div *ngIf="progressIndication" class="progress-bar">
	<mat-progress-bar color="accent" mode="indeterminate"></mat-progress-bar>
</div>
