<div id="navi">
   <toggle-navigation></toggle-navigation>
   <button *ngIf="!current_page || !manuscript_unity" mat-icon-button disabled="true"><mat-icon>first_page</mat-icon></button>
   <button *ngIf="current_page && manuscript_unity"
     mat-icon-button [title]="getPageTitle(manuscript_unity.firstPage)" (click)="setCurrentIri(manuscript_unity.firstPage.id)" 
     [disabled]="updating || manuscript_unity.firstPage.id == current_page.id">
      <mat-icon>first_page</mat-icon>
   </button>
   <button *ngIf="!current_page || !manuscript_unity" mat-icon-button disabled="true"><mat-icon>chevron_left</mat-icon></button>
   <button *ngIf="current_page && manuscript_unity" mat-icon-button [title]="getPageTitle(current_page.previous, manuscript_unity.numberOfPages)" 
     (click)="setCurrentIri(current_page.previous.id)" [disabled]="updating || !current_page.previous">
      <mat-icon>chevron_left</mat-icon>
   </button>
   <mat-form-field appearance="legacy">
      <mat-select [(value)]="selectedViewOption" (selectionChange)="updateParams()">
         <mat-option *ngFor="let viewOption of viewOptions" [value]="viewOption">{{viewOption}}</mat-option>
      </mat-select>
   </mat-form-field>
   <zoom></zoom>
   <span class="mat-button min-width default-mouse" *ngIf="!current_page">Loading ...</span>
   <span class="mat-button min-width default-mouse" *ngIf="geneticOrders.length == 0 && current_page">{{current_page.title}} {{current_page.number}}</span>
   <button mat-button class="min-width" title="Seiteninformationen" (click)="showInformation()" *ngIf="geneticOrders.length > 0 && current_page">
      {{current_page.title}} {{current_page.number}}
      <mat-icon inline="true">info</mat-icon>
   </button>
   <search></search>
   <button *ngIf="!current_page || !manuscript_unity" mat-icon-button disabled="true"><mat-icon>chevron_right</mat-icon></button>
   <button *ngIf="current_page && manuscript_unity" mat-icon-button [title]="getPageTitle(current_page.next, manuscript_unity.numberOfPages)" 
      (click)="setCurrentIri(current_page.next.id)" [disabled]="updating || !current_page.next">
      <mat-icon>chevron_right</mat-icon>
   </button>
   <button *ngIf="!current_page || !manuscript_unity" mat-icon-button disabled="true"><mat-icon>last_page</mat-icon></button>
   <button *ngIf="manuscript_unity && current_page" 
     mat-icon-button [title]="getPageTitle(manuscript_unity.lastPage)" (click)="setCurrentIri(manuscript_unity.lastPage.id)" 
     [disabled]="updating || manuscript_unity.lastPage.id == current_page.id">
      <mat-icon>last_page</mat-icon>
   </button>
</div>