overview.component.html

<!-- Header -->
<div class="header">
  <h1>Scenario Tracker</h1>
  <st-custom-button
    buttonText="Delete all"
    size="M"
    iconType="fontawesome"
    icon="fa fa-trash"
    additionalClasses="delete-button"
    additionalStyles="margin-left: 10px;"
    (click)="deleteAllActionsDialog()">
  </st-custom-button>

  <st-dialog-window
    *ngIf="isDeleteAllDialogOpen"
    (confirmEvent)="onDialogDeleteAllActionsConfirm()"
    (closeEvent)="onDialogDeleteAllActionsCancel()"
    (cancelEvent)="onDialogDeleteAllActionsCancel()">
    <p>Are you sure you want to delete all actions and final states?</p>
  </st-dialog-window>
</div>

<!-- Controls -->
<div style="display: inline-block; width: 10px"></div>
<!--
<custom-button
        buttonText="Stop recording"
        size="M"
        iconType="fontawesome"
        icon="fa fa-stop"
        additionalClasses="stop-button"
        (click)="toggleRecordingHandler()" *ngIf="recording">
</custom-button>

<custom-button 
  buttonText="Start recording"
  size="M"
  iconType="fontawesome"
  icon="fa fa-play"
  additionalClasses="start-button"
  (click)="toggleRecordingHandler()" *ngIf="!recording"></custom-button>
-->
<!-- List of actions -->
<div
  *ngFor="let actionResult of actionsResults; index as i"
  class="action-block">
  <st-captured-action
    *ngIf="actionResult.action"
    [action]="actionResult.action"
    [deleteActionHandler]="deleteActionHandler"
    [startTime]="getStartTime()"
    [toggleDetailDialog]="toggleDetailDialog.bind(this, actionResult)"
    [isActionDetailDialogOpen]="actionResult.isActionDetailDialogOpen ?? false">
  </st-captured-action>
  <st-final-state
    *ngIf="actionResult.result"
    [finalState]="actionResult.result"
    [deleteFinalState]="deleteFinalStateHandler"
    [toggleDetailDialog]="toggleDetailDialog.bind(this, actionResult)"
    [isActionDetailDialogOpen]="actionResult.isActionDetailDialogOpen ?? false">
  </st-final-state>
</div>

<!--
<custom-button
        buttonText="Mark final state"
        size="M"
        iconType="fontawesome"
        icon="fa fa-solid fa-flag-checkered"
        additionalClasses="info-button"
        additionalStyles="margin-top: 2em; margin-left:1em;"
        (click)="markFinalStateHandler()">
</custom-button>
-->