1<mat-card class="golden-card">
2  <mat-card-title>
3    <button
4      mat-flat-button
5      (click)="updateGolden()"
6      [matTooltip]="golden.goldenRepoPath"
7      [matTooltipPosition]="tooltipPosition"
8    >
9      <mat-icon>save</mat-icon>
10      Update golden file
11    </button>
12  </mat-card-title>
13  <mat-card-content>
14    @if (recordedMotion) {
15      <div class="golden-content">
16        <app-timeline-view
17          [recordedMotion]="recordedMotion"
18        ></app-timeline-view>
19      </div>
20    }
21  </mat-card-content>
22</mat-card>
23
24<div class="overlay">
25  <mat-card class="video-card" cdkDrag cdkDragBoundary=".overlay">
26    <mat-card-title class="header">
27      <div class="button-drag" cdkDragHandle>
28        <mat-icon class="drag-icon">drag_indicator</mat-icon>
29        Recording
30      </div>
31    </mat-card-title>
32    <div class="video-container" cdkDragHandle>
33      @if (recordedMotion?.videoSource) {
34        <app-video-view [source]="recordedMotion?.videoSource"></app-video-view>
35      } @else {
36        <p class="mat-body-2">No screen recording frame to show.</p>
37      }
38    </div>
39  </mat-card>
40</div>
41