<cdk-virtual-scroll-viewport itemSize="50" class="viewport" minBufferPx="1200" maxBufferPx="1200">
  <div #notification_parent class="notification-card-parent card-radius mat-elevation-z2" *cdkVirtualFor="let notification of notifications; let i = index;">
    <mat-card class="notification-card card-radius">
      <mat-card-header>
        <mat-card-subtitle>
          <div>
            <span class="notification-timestamp">{{notification.timestamp * 1000 | date:'short'}}</span>
          </div>
        </mat-card-subtitle>
        <mat-card-title>
          @if (NOTIFICATION_PREFIX[notification.type]) {
            {{NOTIFICATION_PREFIX[notification.type]}}
          }
        </mat-card-title>
      </mat-card-header>
      <mat-card-content>
        @if (NOTIFICATION_SUFFIX_KEY[notification.type]) {
          <div style="word-break: break-word">
            {{notification['data'][NOTIFICATION_SUFFIX_KEY[notification.type]]}}
          </div>
        }
      </mat-card-content>
      @if (notification.actions?.length > 0) {
        <mat-card-actions class="notification-actions">
          <button matTooltip="Remove" i18n-matTooltip="Remove" (click)="emitDeleteNotification(notification.uid)" mat-icon-button><mat-icon>close</mat-icon></button>
          @for (action of notification.actions; track action) {
            <span>
              <button [matTooltip]="NOTIFICATION_ACTION_TO_STRING[action]" (click)="emitNotificationAction(notification, action)" mat-icon-button><mat-icon>{{NOTIFICATION_ICON[action]}}</mat-icon></button>
            </span>
          }
        </mat-card-actions>
      }
      @if (!notification.read) {
        <span class="dot"></span>
      }
    </mat-card>
  </div>
</cdk-virtual-scroll-viewport>