@if (subscriptionLoading()) {
  <i
    class="bwi bwi-spinner bwi-spin tw-text-muted"
    title="{{ 'loading' | i18n }}"
    aria-hidden="true"
  ></i>
  <span class="tw-sr-only">{{ "loading" | i18n }}</span>
} @else {
  <!-- Page Header -->
  <div class="tw-mt-10 tw-text-center tw-pb-4">
    <h1 bitTypography="h1" class="tw-my-0">{{ "youHavePremium" | i18n }}</h1>
    <p bitTypography="body1" class="tw-text-muted tw-mb-4 tw-mt-2">
      {{ "viewAndManagePremiumSubscription" | i18n }}
    </p>
  </div>

  <!-- Self-Hosted Subscription Card -->
  <div class="tw-flex tw-justify-center">
    <bit-base-card class="tw-w-[800px] tw-p-4 sm:tw-p-6">
      <div class="tw-flex tw-flex-col tw-gap-5">
        <div class="tw-flex tw-items-center tw-justify-between">
          <div>
            <h2 bitTypography="h2" class="tw-font-semibold tw-mb-0">
              {{ "premiumMembership" | i18n }}
            </h2>
          </div>
          @if (isActive()) {
            <span bitBadge variant="success">{{ "active" | i18n }}</span>
          }
        </div>

        @if (expiration()) {
          <p bitTypography="body1" class="tw-m-0">
            {{ "youNeedToUpdateLicenseFile" | i18n }}
            <strong>{{ expiration() | date: "MMMM d, y" }}</strong
            >.
          </p>
        }

        <div class="tw-flex tw-gap-4">
          <button type="button" bitButton buttonType="secondary" (click)="updateLicense()">
            {{ "updateLicense" | i18n }}
          </button>
          <a
            bitButton
            buttonType="secondary"
            [href]="cloudSubscriptionUrl()"
            target="_blank"
            rel="noreferrer"
            endIcon="bwi-external-link"
          >
            {{ "launchCloudSubscriptionSentenceCase" | i18n }}
          </a>
        </div>
      </div>
    </bit-base-card>
  </div>
}