<div
  class="overlay-center-vertically d-col p-16 p-r-24 p-l-24"
  *ngIf="alerts?.anyAlertExists$ | async"
>
  <ng-container *ngFor="let alertGroup of alerts?.alertGroups">
    <div
      class="alert"
      role="alert"
      *ngIf="alertGroup.value.alerts.length"
      [ngClass]="'alert-' + alertGroup.type"
    >
      <button
        class="close"
        type="button"
        (click)="alerts.dismissAlertGroup(alertGroup.type, dismissPermanently.checked)"
      >
        <span aria-hidden="true">×</span>
        <span class="sr-only">{{ 'Close' | translate }}</span>
      </button>
      <p *ngFor="let alertItem of alertGroup.value.alerts">
        {{ alertItem.text | translate }}
      </p>
      <label
        class="c8y-checkbox m-t-16"
        title="{{ 'Don\'t show again' | translate }}"
      >
        <input
          type="checkbox"
          #dismissPermanently
        />
        <span></span>
        <span>{{ "Don't show again" | translate }}</span>
      </label>
    </div>
  </ng-container>
</div>