dev@170: <md-card>
dev@170:   <md-card-header>
dev@231:     <md-card-title>{{item.title}}</md-card-title>
dev@231:     <md-card-subtitle>{{item.description}}</md-card-subtitle>
dev@170:   </md-card-header>
dev@170:   <md-card-content>
dev@236:     <ng-template [ngIf]="isLoading()">
dev@231:       <ugly-progress-bar
dev@224:         [isDeterminate]="true"
dev@231:         [progress]="item.progress"
dev@231:       ></ugly-progress-bar>
dev@236:     </ng-template>
dev@348:     <div class="content">
dev@348:       <ng-template [ngIf]="!isLoading()">
dev@348:         <ng-template [ngIf]="isActive && isAudioItem()">
dev@348:           <ugly-live-play-head
dev@348:             [timeToPixel]="DOES_NOT_BELONG_HERE"
dev@348:             [colour]="'#c33c54'"
dev@348:           >
dev@348:           </ugly-live-play-head>
dev@348:         </ng-template>
dev@379:         <ugly-waveform
dev@379:           *ngIf="isAudioItem(); else notAudio"
dev@348:           [timeline]="timeline"
dev@348:           [width]="contentWidth"
dev@348:           [audioBuffer]="item.audioData"
dev@348:           [onSeek]="onSeek"
dev@379:           [colour]="'#0868ac'"
dev@348:         ></ugly-waveform>
dev@363: 
dev@363:         <ng-template #notAudio>
dev@365:           <div class="content"
dev@363:             *ngIf="getFeatureShape() as shape; else showSpinner">
dev@365:             <div [ngSwitch]="shape" class="content">
dev@365:               <ugly-curve
dev@365:                 *ngSwitchCase="'vector'"
dev@381:                 [colour]="getNextColour()"
dev@365:                 [timeline]="timeline"
dev@365:                 [width]="contentWidth"
dev@365:                 [onSeek]="onSeek"
dev@372:                 [curve]="item.collected"
dev@370:               ></ugly-curve>
dev@394:               <ugly-cross-hair-inspector *ngSwitchCase="'tracks'">
dev@390:                 <ugly-tracks
dev@390:                   [colour]="getNextColour()"
dev@390:                   [timeline]="timeline"
dev@390:                   [width]="contentWidth"
dev@390:                   [onSeek]="onSeek"
dev@390:                   [tracks]="item.collected"
dev@390:                 ></ugly-tracks>
dev@394:               </ugly-cross-hair-inspector>
dev@394:               <ugly-cross-hair-inspector *ngSwitchCase="'notes'">
dev@390:                 <ugly-notes
dev@390:                   [colour]="getNextColour()"
dev@390:                   [timeline]="timeline"
dev@390:                   [width]="contentWidth"
dev@390:                   [onSeek]="onSeek"
dev@390:                   [notes]="item.collected"
dev@390:                 ></ugly-notes>
dev@394:               </ugly-cross-hair-inspector>
dev@381:               <ugly-instants
dev@381:                 *ngSwitchCase="'instants'"
dev@381:                 [colour]="getNextColour()"
dev@381:                 [timeline]="timeline"
dev@381:                 [width]="contentWidth"
dev@381:                 [onSeek]="onSeek"
dev@381:                 [instants]="item.collected"
dev@381:               ></ugly-instants>
dev@382:               <ugly-grid
dev@382:                 *ngSwitchCase="'matrix'"
dev@382:                 [timeline]="timeline"
dev@382:                 [width]="contentWidth"
dev@382:                 [onSeek]="onSeek"
dev@382:                 [grid]="item.collected"
dev@382:               ></ugly-grid>
dev@382: 
dev@363:               <div *ngSwitchDefault>Feature cannot be visualised.</div>
dev@363:             </div>
dev@363:           </div>
dev@363:           <ng-template #showSpinner>
dev@363:             <ugly-progress-spinner></ugly-progress-spinner>
dev@363:           </ng-template>
dev@348:         </ng-template>
dev@363: 
dev@348:       </ng-template>
dev@348:     </div>
dev@170:   </md-card-content>
dev@170: </md-card>