dev@236: <div class="ugly-container">
dev@236:   <div class="ugly-header">
dev@505:     <mat-toolbar color="primary">
dev@505:       <mat-icon svgIcon="duck"></mat-icon>
dev@102: 
dev@236:       <span class="ugly-toolbar-filler"></span>
dev@102: 
dev@236:       <ugly-playback-control></ugly-playback-control>
dev@190:       <ugly-recording-control
dev@456:         (finishedRecording)="onFileOpened($event, true); tray.close()"
dev@190:       ></ugly-recording-control>
dev@102: 
dev@190:       <!-- This fills the remaining space of the current row -->
dev@236:       <span class="ugly-toolbar-filler"></span>
dev@1: 
dev@13: 
dev@236:       <ugly-audio-file-open
dev@435:         (fileOpened)="onFileOpened($event); tray.close()"
dev@236:       ></ugly-audio-file-open>
dev@505:       <button mat-icon-button (click)="analyses.stepBack()">
dev@505:         <mat-icon>undo</mat-icon>
dev@464:       </button>
dev@505:       <button mat-icon-button (click)="analyses.stepForward()">
dev@505:         <mat-icon>redo</mat-icon>
dev@464:       </button>
dev@505:       <button mat-icon-button (click)="tray.toggle()">
dev@505:         <mat-icon>extension</mat-icon>
dev@484:       </button>
dev@505:     </mat-toolbar>
dev@190:   </div>
dev@7: 
dev@427:   <ugly-action-tray #tray>
dev@427:     <ugly-feature-extraction-menu
dev@436:       (requestOutput)="tray.close(); extractFeatures($event)"
dev@427:       [disabled]="!canExtract"
dev@427:     >
dev@427:     </ugly-feature-extraction-menu>
dev@427:   </ugly-action-tray>
dev@236:   <div class="ugly-content">
dev@419:     <ugly-notebook-feed
dev@456:       (removeItem)="removeItem($event)"
dev@419:       [analyses]="analyses.toIterable()"
dev@419:       [onSeek]="onSeek"></ugly-notebook-feed>
dev@190:   </div>
dev@190: </div>