<!--
  ~ Copyright (C) 2021 Robert Bosch GmbH Copyright (C) 2021 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
  -->
<div
  class="bci-banner-wrapper"
  [ngClass]="{ 'has-banner': hasBanner }"
  *ngIf="hasBanner"
  [ngClass]="'notification-' + banner.bannerClass"
>
  <div class="bci-portal-banner" [id]="banner.bannerId" [ngClass]="{ 'has-banner': hasBanner }">
    <div class="bci-portal-banner-text-container">
      <mat-icon [fontIcon]="getFontIcon(banner.bannerClass)"></mat-icon>
      <div class="bci-portal-banner-text">{{ banner.text }}</div>
    </div>

    <div class="bci-portal-button-container">
      <ng-container *ngIf="banner.buttons && banner.buttons.length > 0">
        <ng-container *ngFor="let button of banner.buttons">
          <button
            *ngIf="button.clickHandler; else linkBlock"
            class="banner-link"
            (click)="button.clickHandler(); dismiss(banner.bannerId)"
          >
            {{ button.text }}
          </button>
          <ng-template #linkBlock>
            <a class="nav-link" [href]="button.link">{{ button.text }}</a>
          </ng-template>
        </ng-container>
      </ng-container>
      <mat-icon
        [fontIcon]="'Bosch-Ic-abort'"
        class="close-button"
        *ngIf="banner.showDismissButton"
        (click)="dismiss(banner.bannerId)"
      ></mat-icon>
    </div>
  </div>
</div>
