@if (alerts?.anyAlertExists$ | async) {
  <div class="overlay-center-vertically d-col p-16 p-r-24 p-l-24">
    @for (alertGroup of alerts?.alertGroups; track alertGroup) {
      @if (alertGroup.value.alerts.length) {
        <div
          class="alert"
          role="alert"
          [ngClass]="'alert-' + alertGroup.type"
        >
          @if (alertGroup.value.alertDismissal.dismissStrategy !== 'none') {
            <button
              class="close"
              type="button"
              (click)="
                alerts.dismissAlertGroup(alertGroup.type, dismissPermanently.nativeElement.checked)
              "
            >
              <span aria-hidden="true">×</span>
              <span class="sr-only">{{ 'Close' | translate }}</span>
            </button>
          }

          @for (alertItem of alertGroup.value.alerts; track alertItem) {
            <p [innerHTML]="sanitizeAlertText(alertItem.text)"></p>
          }

          @if (alertGroup.value.alertDismissal.dismissStrategy !== 'none') {
            <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>
      }
    }
  </div>
}