<div class="toast-container position-fixed bottom-0 start-50 translate-middle-x p-3">
  @for (toast of toasts(); track toast.id) {
    <div
      class="toast show align-items-center border-0 shadow-sm"
      [ngClass]="getToastBgClass(toast.type)"
      role="alert"
      aria-live="assertive"
      aria-atomic="true"
    >
      <div class="d-flex p-2">
        <div class="toast-body d-flex align-items-center flex-grow-1">
          <i [class]="getToastIconClass(toast.type)" class="me-2 fs-5"></i>
          <span>{{ toast.message }}</span>
        </div>
        <button
          type="button"
          class="btn-close btn-close-white me-2 m-auto"
          aria-label="Cerrar"
          (click)="dismiss(toast.id)"
        ></button>
      </div>
    </div>
  }
</div>
