@let isDrawer = dialogRef?.isDrawer;
<!-- Storybook/Angular bugs out without this nullcheck. See the Access Selector Dialog story when removed. -->
@let widthClass = width() ?? "";
<section
  class="tw-flex tw-w-full tw-flex-col tw-self-center tw-overflow-hidden tw-border tw-border-solid tw-border-secondary-100 tw-bg-background tw-text-main"
  [ngClass]="[
    widthClass,
    isDrawer ? 'tw-h-full tw-border-t-0' : 'tw-rounded-t-xl md:tw-rounded-xl tw-shadow-lg',
  ]"
  cdkTrapFocus
>
  @let showHeaderBorder = bodyHasScrolledFrom().top;
  <header
    class="tw-flex tw-justify-between tw-items-center tw-gap-2 tw-border-0 tw-border-b tw-border-solid tw-py-3 tw-ps-6 tw-pe-4"
    [ngClass]="{
      'tw-p-4 has-[[biticonbutton]]:tw-pe-2': !isDrawer,
      'tw-px-6 tw-py-4 has-[[biticonbutton]]:tw-pe-4': isDrawer,
      'tw-border-secondary-100': showHeaderBorder,
      'tw-border-transparent': !showHeaderBorder,
    }"
  >
    @if (isStacked()) {
      <button
        type="button"
        bitIconButton="bwi-angle-left"
        buttonType="primaryGhost"
        size="default"
        bitDialogClose
        [label]="'back' | i18n"
      ></button>
    }
    <h2
      bitDialogTitleContainer
      bitTypography="h3"
      noMargin
      class="tw-flex-1 tw-text-main tw-mb-0 tw-line-clamp-2 tw-text-ellipsis tw-break-words focus-visible:tw-outline-none"
      tabindex="-1"
      #dialogHeader
    >
      {{ title() }}
      @if (subtitle(); as subtitleText) {
        <span class="tw-text-muted tw-font-normal tw-text-sm">
          {{ subtitleText }}
        </span>
      }
      <ng-content select="[bitDialogTitle]"></ng-content>
    </h2>

    <div class="tw-flex tw-items-center tw-justify-center">
      <ng-content select="[bitDialogHeaderEnd]"></ng-content>

      @if (!this.dialogRef?.disableClose) {
        <button
          type="button"
          bitIconButton="bwi-close"
          buttonType="primaryGhost"
          size="default"
          (click)="closeDialog()"
          [label]="'close' | i18n"
        ></button>
      }
    </div>
  </header>

  <div
    class="tw-relative tw-flex-1 tw-flex tw-flex-col tw-overflow-hidden"
    [ngClass]="{
      'tw-min-h-60': loading(),
      'tw-bg-background': background() === 'default',
      'tw-bg-background-alt': background() === 'alt',
    }"
  >
    @if (loading()) {
      <div class="tw-absolute tw-flex tw-size-full tw-items-center tw-justify-center">
        <bit-spinner />
      </div>
    }
    <div
      cdkScrollable
      class="tw-py-2 tw-ps-6 tw-pe-6"
      [ngClass]="{
        'tw-pb-4': !hasFooter(),
        'tw-overflow-y-auto': !loading(),
        'tw-invisible tw-overflow-y-hidden': loading(),
        'tw-py-4': background() === 'alt',
      }"
      tabindex="0"
    >
      <ng-content select="[bitDialogContent]"></ng-content>
      <div #scrollBottom></div>
    </div>
  </div>
  @if (hasFooter()) {
    @let isScrollable = isScrollable$ | async;
    @let showFooterBorder =
      (!bodyHasScrolledFrom().top && isScrollable) || bodyHasScrolledFrom().bottom;
    <div
      class="tw-border-0 tw-border-t tw-border-solid"
      [ngClass]="{
        'tw-border-transparent': !showFooterBorder,
        'tw-border-secondary-100': showFooterBorder,
      }"
      data-chromatic="ignore"
    ></div>
    <footer
      class="tw-flex tw-flex-row tw-items-center tw-gap-2 tw-bg-background tw-py-5 tw-ps-6 tw-pe-4"
      [ngClass]="{
        'tw-px-6 tw-py-4': isDrawer,
        'tw-p-4 has-[[biticonbutton]]:tw-pe-2': !isDrawer,
      }"
    >
      <ng-content select="[bitDialogFooter]"></ng-content>
    </footer>
  }
</section>