@if (settings$ | async; as settings) {
  @if (showBanner$ | async) {
    <div>
      <div
        class="alert"
        [class]="'alert-' + settings.messageBannerType"
      >
        <div
          class="flex-grow"
          [innerHTML]="settings.messageBannerContent | translate | markdownToHtml | async"
        ></div>
        <div class="d-flex">
          <button
            class="btn btn-default m-l-auto"
            [title]="'Acknowledge and close' | translate"
            type="button"
            (click)="dismiss(settings, true)"
          >
            {{ 'Acknowledge and close' | translate }}
          </button>
          <button
            class="btn btn-default m-l-8"
            [title]="'Close' | translate"
            type="button"
            (click)="dismiss(settings, false)"
          >
            {{ 'Close' | translate }}
          </button>
        </div>
      </div>
    </div>
  }
}