@if (suggestionsRD$ | async) {
  <div class="notifications-wrapper position-fixed top right">
    <div class="notification alert alert-success alert-dismissible m-3 shadow" role="alert">
      <button (click)="removePopup()"
        type="button" class="close pt-0 pe-1 pe-0 pb-0" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
      <div class="d-flex flex-row">
        <div class="d-flex flex-column justify-content-center align-items-center">
          <div class="notification-icon d-flex justify-content-center"><i class="fas fa-2x fa-check-circle"></i></div>
        </div>
        <div class="d-flex flex-column justify-content-center align-content-stretch text-left p-2">
          @if ((suggestionsRD$ | async); as suggestions) {
            @for (suggestion of suggestions; track suggestion) {
              <ng-container class="alert alert-info">
                @if (suggestion.total > 0) {
                  <div>
                    <div [innerHTML]="'notification.suggestion' | translate: getNotificationSuggestionInterpolation(suggestion)"></div>
                    {{ 'notification.suggestion.please' | translate }}
                    <a [routerLink]="getNotificationSuggestionInterpolation(suggestion).url"> {{ 'notification.suggestion.review' | translate}} </a>
                  </div>
                }
              </ng-container>
            }
          }
        </div>
      </div>
    </div>
  </div>
}


