@let icon = displayIcon();

<ng-template #defaultContent>
  <ng-content></ng-content>
</ng-template>

<div
  class="tw-relative tw-border-solid tw-border-b tw-border-0 tw-p-4"
  [class]="bannerClass()"
  [attr.role]="useAlertRole() ? 'status' : null"
  [attr.aria-live]="useAlertRole() ? 'polite' : null"
>
  @if (title()) {
    <div>
      <div class="tw-flex tw-gap-3 tw-w-full">
        @if (icon) {
          <!-- Two icon tiles are needed here because `size` is a TypeScript input — it can't change in
                       response to a CSS container query. We use two elements with opposing visibility classes
                       to swap between sm and lg at the @3xl breakpoint. -->
          <bit-icon-tile
            [icon]="icon"
            [variant]="variant()"
            size="sm"
            class="@3xl:tw-hidden"
            aria-hidden="true"
          />
          <bit-icon-tile
            [icon]="icon"
            [variant]="variant()"
            size="lg"
            class="tw-hidden @3xl:tw-block"
            aria-hidden="true"
          />
        }
        <div class="tw-flex tw-flex-col tw-gap-3 @3xl:tw-flex-row tw-pe-6 @3xl:tw-pe-0 tw-w-full">
          <div class="@3xl:tw-me-auto">
            <div
              class="!tw-text-sm @3xl:!tw-text-lg tw-text-main tw-font-medium @3xl:!tw-leading-6"
            >
              {{ title() }}
            </div>
            <span bitTypography="body2" class="tw-max-w-[800px]">
              <ng-container *ngTemplateOutlet="defaultContent"></ng-container>
            </span>
          </div>
          <div class="empty:tw-hidden tw-flex tw-gap-3 tw-items-start tw-shrink-0">
            <ng-content select="[slot='actions']"></ng-content>
          </div>
          @if (isDismissible()) {
            <button
              type="button"
              bitIconButton="bwi-close"
              buttonType="primaryGhost"
              size="small"
              (click)="onDismiss()"
              [label]="'close' | i18n"
              class="tw-hidden @3xl:tw-block"
            ></button>
          }
        </div>
        @if (isDismissible()) {
          <div class="tw-absolute tw-end-2 tw-top-2 tw-block @3xl:tw-hidden">
            <button
              type="button"
              bitIconButton="bwi-close"
              buttonType="primaryGhost"
              size="small"
              (click)="onDismiss()"
              [label]="'close' | i18n"
            ></button>
          </div>
        }
      </div>
    </div>
  } @else {
    <div [class]="isDismissible() ? 'tw-pe-6' : ''">
      <div class="tw-flex tw-items-start tw-gap-3 @3xl:tw-justify-center">
        @if (icon) {
          <bit-icon-tile [icon]="icon" [variant]="variant()" size="sm" aria-hidden="true" />
        }
        <span bitTypography="body2" class="tw-mt-0.5 tw-max-w-[800px]">
          <ng-container *ngTemplateOutlet="defaultContent"></ng-container>
        </span>
      </div>
      @if (isDismissible()) {
        <div class="tw-absolute tw-end-2 tw-top-3">
          <button
            type="button"
            bitIconButton="bwi-close"
            buttonType="primaryGhost"
            size="small"
            (click)="onDismiss()"
            [label]="'close' | i18n"
          ></button>
        </div>
      }
    </div>
  }
</div>