<div class="tw-flex tw-flex-col tw-items-center tw-gap-8 tw-text-center tw-w-full">
  <bit-icon-tile
    icon="bwi-check-circle"
    variant="success"
    size="xl"
    ariaLabel="{{ 'paymentSuccessful' | i18n }}"
  ></bit-icon-tile>
  <div class="tw-w-full">
    <h1 bitTypography="h1" class="tw-mb-4">{{ "paymentSuccessful" | i18n }}</h1>
    <p bitTypography="body1" class="tw-m-0 tw-text-fg-body">
      {{ "paymentSuccessfulProcessingMessage" | i18n }}
    </p>
  </div>

  <dl
    class="tw-m-0 tw-flex tw-w-full tw-flex-col tw-gap-4 tw-rounded-xl tw-border tw-border-solid tw-border-secondary-300 tw-p-4 tw-text-left"
  >
    <div class="tw-flex tw-items-center tw-justify-between tw-gap-3">
      <dt bitTypography="body1" class="tw-m-0 tw-text-fg-body-subtle tw-font-normal">
        {{ "planPurchased" | i18n }}
      </dt>
      <dd bitTypography="body1" class="tw-m-0 tw-font-medium tw-text-main">
        {{ planNameKey | i18n }}
      </dd>
    </div>
    <div class="tw-flex tw-items-center tw-justify-between tw-gap-3">
      <dt bitTypography="body1" class="tw-m-0 tw-text-fg-body-subtle tw-font-normal">
        {{ "startDate" | i18n }}
      </dt>
      <dd bitTypography="body1" class="tw-m-0 tw-font-medium tw-text-main">
        {{ startDate | date: "MMMM d, y" }}
      </dd>
    </div>
    <div class="tw-flex tw-items-center tw-justify-between tw-gap-3">
      <dt bitTypography="body1" class="tw-m-0 tw-text-fg-body-subtle tw-font-normal">
        {{ "renewalDate" | i18n }}
      </dt>
      <dd bitTypography="body1" class="tw-m-0 tw-font-medium tw-text-main">
        {{ renewalDate | date: "MMMM d, y" }}
      </dd>
    </div>
    <div class="tw-flex tw-items-center tw-justify-between tw-gap-3">
      <dt bitTypography="body1" class="tw-m-0 tw-text-fg-body-subtle tw-font-normal">
        {{ "upgradeStatus" | i18n }}
      </dt>
      <dd class="tw-m-0">
        <span
          bitBadge
          variant="info"
          startIcon="bwi-clock"
          size="small"
          data-testid="upgrade-status-badge"
        >
          {{ "processing" | i18n }}
        </span>
      </dd>
    </div>
  </dl>

  <a
    bitButton
    buttonType="primary"
    [routerLink]="managePlanRoute"
    endIcon="bwi-external-link"
    data-testid="manage-plan-button"
  >
    {{ "managePlanInWebApp" | i18n }}
  </a>
</div>
