dev@236: <div class="ugly-container">
dev@236:   <div class="ugly-header">
dev@190:     <md-toolbar color="primary">
dev@190:       <md-icon svgIcon="duck"></md-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@190:         (finishedRecording)="onFileOpened($event)"
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@190:         (fileOpened)="onFileOpened($event)"
dev@236:       ></ugly-audio-file-open>
dev@190:       <!-- menu opens when trigger button is clicked -->
dev@190:       <button md-icon-button (click)="sidenav.toggle()">
dev@190:         <md-icon>extension</md-icon>
dev@190:       </button>
dev@190:     </md-toolbar>
dev@190:   </div>
dev@7: 
dev@236:   <div class="ugly-content">
dev@190:     <md-sidenav-container>
dev@190:       <md-sidenav #sidenav align="start" mode="over">
dev@236:         <ugly-feature-extraction-menu
dev@190:           (requestOutput)="extractFeatures($event)"
dev@190:           [disabled]="!canExtract">
dev@236:         </ugly-feature-extraction-menu>
dev@190:       </md-sidenav>
dev@190:       <ugly-notebook-feed
dev@235:         [analyses]="analyses.toIterable()"
dev@353:         [rootAudioUri]="rootAudioItem.uri"
dev@347:         [onSeek]="onSeek"></ugly-notebook-feed>
dev@190:     </md-sidenav-container>
dev@190:   </div>
dev@190: </div>