@if (!loading()) {
  <section
    class="tw-w-screen tw-max-h-screen tw-min-w-[332px] md:tw-max-w-6xl tw-overflow-y-auto tw-self-center tw-bg-background tw-rounded-xl tw-shadow-lg tw-border-secondary-100 tw-border-solid tw-border"
    cdkTrapFocus
    cdkTrapFocusAutoCapture
  >
    <header class="tw-flex tw-items-center tw-justify-end tw-pl-6 tw-pt-3 tw-pr-2">
      <button
        cdkFocusInitial
        type="button"
        bitIconButton="bwi-close"
        buttonType="main"
        size="default"
        [label]="'close' | i18n"
        (click)="closeClicked.emit(closedStatus)"
      ></button>
    </header>
    <div class="tw-px-14 tw-py-8">
      <div class="tw-flex tw-text-center tw-flex-col tw-pb-4">
        <h1 class="tw-font-medium tw-text-[32px]">
          {{ "upgradeYourPlan" | i18n }}
        </h1>
        <p bitTypography="body1" class="tw-text-muted">
          {{ "upgradeShareEvenMore" | i18n }}
        </p>
      </div>

      <div class="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-5 tw-mb-4">
        @if (familiesCardDetails) {
          <billing-pricing-card
            class="tw-w-full tw-min-w-[216px]"
            [tagline]="familiesCardDetails.tagline"
            [price]="familiesCardDetails.price"
            [button]="familiesCardDetails.button"
            [features]="familiesCardDetails.features"
            (buttonClick)="planSelected.emit(familiesPlanType)"
          >
            <h3 slot="title" class="tw-m-0" bitTypography="h3">
              {{ familiesCardDetails.title }}
            </h3>
          </billing-pricing-card>
        }

        @if (teamsCardDetails) {
          <billing-pricing-card
            class="tw-w-full tw-min-w-[216px]"
            [tagline]="teamsCardDetails.tagline"
            [price]="teamsCardDetails.price"
            [button]="teamsCardDetails.button"
            [features]="teamsCardDetails.features"
            (buttonClick)="planSelected.emit(teamsPlanType)"
          >
            <h3 slot="title" class="tw-m-0" bitTypography="h3">
              {{ teamsCardDetails.title }}
            </h3>
          </billing-pricing-card>
        }

        @if (enterpriseCardDetails) {
          <billing-pricing-card
            class="tw-w-full tw-min-w-[216px]"
            [tagline]="enterpriseCardDetails.tagline"
            [price]="enterpriseCardDetails.price"
            [button]="enterpriseCardDetails.button"
            [features]="enterpriseCardDetails.features"
            (buttonClick)="planSelected.emit(enterprisePlanType)"
          >
            <h3 slot="title" class="tw-m-0" bitTypography="h3">
              {{ enterpriseCardDetails.title }}
            </h3>
          </billing-pricing-card>
        }
      </div>

      <div class="tw-text-center tw-w-full">
        <p bitTypography="helper" class="tw-text-muted tw-italic">
          {{ "organizationUpgradeTaxInformationMessage" | i18n }}
        </p>
      </div>
    </div>
  </section>
}
