@for (toast of toastService.toasts; track toast) {
  <div class="toast show" [class]="toast.classname" role="alert">
    <div class="toast-body d-flex justify-content-between align-items-center gap-2">
      {{ toast.message }}
      <button type="button" class="btn-close btn-close-white flex-shrink-0" (click)="toastService.remove(toast)"></button>
    </div>
  </div>
}