dev@505: <mat-card>
dev@505:   <mat-card-header>
dev@505:     <mat-card-title>{{item.title}}</mat-card-title>
dev@505:     <mat-card-subtitle>{{item.description}}</mat-card-subtitle>
dev@505:   </mat-card-header>
dev@505:   <mat-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>
cannam@480:           <ugly-cross-hair-inspector
cannam@480:             *ngSwitchCase="'regions'"
cannam@480:             [unit]="item.unit"
cannam@480:             [isAnimated]="isActive"
cannam@480:           >
cannam@480:             <ugly-regions
cannam@480:               [colour]="getNextColour()"
cannam@480:               [timeline]="timeline"
cannam@480:               [width]="contentWidth"
cannam@480:               [onSeek]="onSeek"
cannam@480:               [regions]="item.collected"
cannam@480:               [duration]="getDuration()"
cannam@480:             ></ugly-regions>
cannam@480:           </ugly-cross-hair-inspector>
dev@488:           <ugly-vertical-scale
cannam@471:             *ngSwitchCase="'matrix'"
cannam@471:           >
cannam@471:             <ugly-grid
cannam@471:               [colour]="getNextColour()"
cannam@471:               [timeline]="timeline"
cannam@471:               [width]="contentWidth"
cannam@471:               [onSeek]="onSeek"
cannam@471:               [grid]="item.collected"
cannam@471:               [duration]="getDuration()"
cannam@471:             ></ugly-grid>
dev@488:           </ugly-vertical-scale>
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@363: 
dev@409:           <div *ngSwitchDefault>Feature cannot be visualised.</div>
dev@409:         </ugly-waves-play-head>
dev@348:       </ng-template>
dev@348:     </div>
dev@505:   </mat-card-content>
dev@505:   <mat-card-actions
dev@456:     *ngIf="isAudioItem()">
dev@505:     <a mat-icon-button
dev@456:        *ngIf="isAudioItem() && item.isExportable"
dev@456:       [href]="sanitize(item.uri)"
dev@456:       [download]="generateFilename(item)"
dev@505:     ><mat-icon>file_download</mat-icon></a>
dev@505:     <button mat-icon-button (click)="remove.emit(item)">
dev@505:       <mat-icon>delete_forever</mat-icon>
dev@456:     </button>
dev@505:   </mat-card-actions>
dev@505: </mat-card>