@for (notification of notifications; track notification.id) {
  <div
    [id]="notification.id"
    class="notification {{ notification.position }} {{ notification.type }}"
    [class.with-icon]="!!notification.icon"
    [class.dismissable]="notification.dismissible"
    role="alert"
    [attr.aria-labelledby]="notification.id + '-title'">
    <h2 [id]="notification.id + '-title'" class="h5">
      @if (notification.icon) {
        <it-icon [name]="notification.icon"></it-icon>
      }
      <ng-container>{{ notification.title }}</ng-container>
    </h2>
    @if (notification.message) {
      <p>{{ notification.message }}</p>
    }
    @if (notification.dismissible) {
      <button type="button" class="btn notification-close" (click)="hideNotification(notification.id)">
        <it-icon name="close"></it-icon>
        <span class="visually-hidden">{{ 'it.core.close-notification' | translate: { title: notification.title } }}</span>
      </button>
    }
  </div>
}