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@348:     <div class="content">
dev@409:       <ng-template [ngIf]="isLoading()">
dev@409:         <ugly-progress-bar
dev@409:           [isDeterminate]="true"
dev@409:           [progress]="item.progress"
dev@409:         ></ugly-progress-bar>
dev@409:       </ng-template>
dev@348:       <ng-template [ngIf]="!isLoading()">
dev@410:         <ugly-progress-spinner *ngIf="isPending()"></ugly-progress-spinner>
dev@409:         <ugly-waves-play-head
dev@409:           [colour]="'#c33c54'"
dev@409:           [isActive]="isActive"
dev@409:         >
dev@409:           <ugly-waveform
dev@409:             *ngIf="isAudioItem(); else notAudio"
dev@409:             [timeline]="timeline"
dev@409:             [width]="contentWidth"
dev@409:             [audioBuffer]="item.audioData"
dev@409:             [onSeek]="onSeek"
dev@409:             [colour]="'#0868ac'"
dev@412:             [duration]="getDuration()"
dev@409:           ></ugly-waveform>
dev@409:         </ugly-waves-play-head>
dev@409: 
dev@409: 
dev@409:         <ugly-waves-play-head
dev@409:           #notAudio
dev@409:           *ngIf="getFeatureShape() as shape"
dev@409:           [ngSwitch]="shape"
dev@409:           [colour]="'#c33c54'"
dev@409:           [isActive]="isActive"
dev@409:         >
dev@409:           <ugly-cross-hair-inspector
dev@409:             *ngSwitchCase="'vector'"
dev@409:             [unit]="item.unit"
dev@409:             [isAnimated]="isActive"
dev@348:           >
dev@409:             <ugly-curve
dev@409:               [colour]="getNextColour()"
dev@409:               [timeline]="timeline"
dev@409:               [width]="contentWidth"
dev@409:               [onSeek]="onSeek"
dev@409:               [curve]="item.collected"
dev@412:               [duration]="getDuration()"
dev@409:             ></ugly-curve>
dev@409:           </ugly-cross-hair-inspector>
dev@409:           <ugly-cross-hair-inspector
dev@409:             *ngSwitchCase="'tracks'"
dev@409:             [unit]="item.unit"
dev@409:             [isAnimated]="isActive"
dev@409:           >
dev@409:             <ugly-tracks
dev@409:               [colour]="getNextColour()"
dev@409:               [timeline]="timeline"
dev@409:               [width]="contentWidth"
dev@409:               [onSeek]="onSeek"
dev@409:               [tracks]="item.collected"
dev@412:               [duration]="getDuration()"
dev@409:             ></ugly-tracks>
dev@409:           </ugly-cross-hair-inspector>
dev@409:           <ugly-cross-hair-inspector
dev@409:             *ngSwitchCase="'notes'"
dev@409:             [unit]="item.unit"
dev@409:             [isAnimated]="isActive"
dev@409:           >
dev@409:             <ugly-notes
dev@409:               [colour]="getNextColour()"
dev@409:               [timeline]="timeline"
dev@409:               [width]="contentWidth"
dev@409:               [onSeek]="onSeek"
dev@409:               [notes]="item.collected"
dev@412:               [duration]="getDuration()"
dev@409:             ></ugly-notes>
dev@409:           </ugly-cross-hair-inspector>
dev@409:           <ugly-instants
dev@409:             *ngSwitchCase="'instants'"
dev@409:             [colour]="getNextColour()"
dev@409:             [timeline]="timeline"
dev@409:             [width]="contentWidth"
dev@409:             [onSeek]="onSeek"
dev@409:             [instants]="item.collected"
dev@412:             [duration]="getDuration()"
dev@409:           ></ugly-instants>
dev@409:           <ugly-grid
dev@409:             *ngSwitchCase="'matrix'"
dev@409:             [timeline]="timeline"
dev@409:             [width]="contentWidth"
dev@409:             [onSeek]="onSeek"
dev@409:             [grid]="item.collected"
dev@412:             [duration]="getDuration()"
dev@409:           ></ugly-grid>
dev@363: 
dev@409:           <div *ngSwitchDefault>Feature cannot be visualised.</div>
dev@409:         </ugly-waves-play-head>
dev@348:       </ng-template>
dev@348:     </div>
dev@170:   </md-card-content>
dev@170: </md-card>