@if (activeBanner$ | async; as banner) {
  <div
    [@banner]
    class="content-wrapper"
    role="status"
    aria-live="polite"
  >
    @if (banner.progress$ && (banner.progress$ | async); as progress) {
      @if (progress > 0) {
        <mat-progress-bar
          mode="determinate"
          [value]="progress"
        ></mat-progress-bar>
      }
    }
    <div class="inner-content-wrapper">
      @if (banner.img) {
        <div class="motivational-img-wrapper">
          <img
            [src]="banner.img"
            alt=""
          />
        </div>
      }
      <div class="message-wrapper">
        @if (banner.ico) {
          <mat-icon>{{ banner.ico }}</mat-icon>
        }
        @if (banner.svgIco) {
          <mat-icon [svgIcon]="banner.svgIco"></mat-icon>
        }
        <!-- -->
        @if (banner.timer$) {
          <div class="message">
            <strong aria-hidden="true">{{
              banner.timer$ | async | msToMinuteClockString
            }}</strong>
            –
            {{ banner.msg | translate: banner.translateParams }}
          </div>
        } @else {
          <div
            [innerHTML]="banner.msg | translate: banner.translateParams"
            class="message"
          ></div>
        }
      </div>
      <div class="buttons">
        @if (!banner.action2 && !banner.isHideDismissBtn) {
          <button
            (click)="dismiss(banner.id)"
            color="primary"
            mat-button
            tabindex="1"
          >
            {{ T.G.DISMISS | translate }}
          </button>
        }
        @if (banner.action) {
          @if (banner.action.icon) {
            <button
              (click)="action(banner, banner.action)"
              [attr.aria-label]="banner.action.label | translate: banner.translateParams"
              [title]="banner.action.label | translate: banner.translateParams"
              mat-icon-button
              tabindex="1"
            >
              <mat-icon>{{ banner.action.icon }}</mat-icon>
            </button>
          } @else {
            <button
              (click)="action(banner, banner.action)"
              color="primary"
              mat-button
              tabindex="1"
            >
              {{ banner.action.label | translate: banner.translateParams }}
            </button>
          }
        }
        @if (banner.action2) {
          @if (banner.action2.icon) {
            <button
              (click)="action(banner, banner.action2)"
              [attr.aria-label]="banner.action2.label | translate: banner.translateParams"
              [title]="banner.action2.label | translate: banner.translateParams"
              mat-icon-button
              tabindex="1"
            >
              <mat-icon>{{ banner.action2.icon }}</mat-icon>
            </button>
          } @else {
            <button
              (click)="action(banner, banner.action2)"
              color="primary"
              mat-button
              tabindex="1"
            >
              {{ banner.action2.label | translate: banner.translateParams }}
            </button>
          }
        }
        @if (banner.action3) {
          @if (banner.action3.icon) {
            <button
              (click)="action(banner, banner.action3)"
              [attr.aria-label]="banner.action3.label | translate: banner.translateParams"
              [title]="banner.action3.label | translate: banner.translateParams"
              mat-icon-button
              tabindex="1"
            >
              <mat-icon>{{ banner.action3.icon }}</mat-icon>
            </button>
          } @else {
            <button
              (click)="action(banner, banner.action3)"
              color="primary"
              mat-button
              tabindex="1"
            >
              {{ banner.action3.label | translate: banner.translateParams }}
            </button>
          }
        }
      </div>
    </div>
  </div>
}