<app-header></app-header>

<bit-container>
  <ng-container *ngIf="!firstLoaded && loading">
    <i class="bwi bwi-spinner bwi-spin tw-text-muted" title="{{ 'loading' | i18n }}"></i>
    <span class="tw-sr-only">{{ "loading" | i18n }}</span>
  </ng-container>

  <app-org-subscription-hidden
    *ngIf="firstLoaded && !userOrg.canViewSubscription"
    [providerName]="userOrg.providerName"
  ></app-org-subscription-hidden>

  <ng-container *ngIf="subscription && firstLoaded">
    <dl class="tw-mb-2">
      <dt>{{ "billingPlan" | i18n }}</dt>
      <dd>{{ subscription.planName }}</dd>
      <ng-container *ngIf="billingSyncSetUp">
        <dt>{{ "lastLicenseSync" | i18n }}</dt>
        <dd>
          {{ lastLicenseSync != null ? (lastLicenseSync | date: "medium") : ("never" | i18n) }}
        </dd>
      </ng-container>
      <dt>
        <span [ngClass]="{ 'tw-text-danger': showAsExpired }">{{
          "subscriptionExpiration" | i18n
        }}</span>
        <a
          href="https://bitwarden.com/help/licensing-on-premise/#update-organization-license"
          target="_blank"
          [appA11yTitle]="'licensePaidFeaturesHelp' | i18n"
          rel="noreferrer"
        >
          <i class="bwi bwi-question-circle" aria-hidden="true"></i>
          <span class="tw-sr-only">{{ "licensePaidFeaturesHelp" | i18n }}</span>
        </a>
      </dt>
      <dd *ngIf="subscription.hasExpiration" [ngClass]="{ 'tw-text-danger': showAsExpired }">
        {{
          (subscription.hasSeparateGracePeriod
            ? subscription.expirationWithoutGracePeriod
            : subscription.expirationWithGracePeriod
          ) | date: "mediumDate"
        }}
        <div
          *ngIf="subscription.hasSeparateGracePeriod && !subscription.isInTrial"
          class="tw-text-muted tw-break-words tw-whitespace-normal tw-max-w-fit tw-inline-block"
        >
          {{
            "selfHostGracePeriodHelp"
              | i18n: (subscription.expirationWithGracePeriod | date: "mediumDate")
          }}
        </div>
      </dd>
      <dd *ngIf="!subscription.hasExpiration">{{ "neverExpires" | i18n }}</dd>
    </dl>

    <a
      bitButton
      buttonType="secondary"
      href="{{ this.cloudWebVaultUrl }}"
      target="_blank"
      rel="noreferrer"
      class="tw-mb-4"
    >
      {{ "launchCloudSubscription" | i18n }}
    </a>
    <form [formGroup]="form">
      <bit-radio-group formControlName="updateMethod" [block]="true">
        <h2 class="tw-mt-5">
          {{ "licenseAndBillingManagement" | i18n }}
        </h2>
        <bit-radio-button
          id="automatic-sync"
          [value]="licenseOptions.SYNC"
          [disabled]="disableLicenseSyncControl"
          *ngIf="showAutomaticSyncAndManualUpload"
        >
          <bit-label
            >{{ "automaticSync" | i18n }}
            <a
              href="https://bitwarden.com/help/families-for-enterprise-self-hosted/"
              target="_blank"
              rel="noreferrer"
              slot="end"
              bitLink
            >
              <i class="bwi bwi-question-circle" aria-hidden="true"></i>
              <span class="tw-sr-only">{{ "billingSyncHelp" | i18n }}</span>
            </a>
          </bit-label>
          <bit-hint>
            {{ "automaticBillingSyncDesc" | i18n }}
          </bit-hint>
        </bit-radio-button>
        <ng-container *ngIf="updateMethod === licenseOptions.SYNC">
          <div class="tw-mt-6 tw-flex tw-gap-2">
            <button
              bitButton
              buttonType="secondary"
              type="button"
              (click)="manageBillingSyncSelfHosted()"
            >
              {{ "manageBillingTokenSync" | i18n }}
            </button>
            <button
              bitButton
              buttonType="primary"
              type="button"
              [bitAction]="syncLicense"
              [disabled]="!billingSyncEnabled"
            >
              {{ "syncLicense" | i18n }}
            </button>
          </div>
        </ng-container>

        <bit-radio-button
          id="manual-upload"
          [value]="licenseOptions.UPLOAD"
          class="tw-mt-6"
          *ngIf="showAutomaticSyncAndManualUpload"
        >
          <bit-label>{{ "manualUpload" | i18n }}</bit-label>
          <bit-hint>
            {{ "manualBillingTokenUploadDesc" | i18n }}
          </bit-hint>
        </bit-radio-button>
        <ng-container *ngIf="updateMethod === licenseOptions.UPLOAD">
          <bit-label class="tw-mb-6 tw-block" *ngIf="!showAutomaticSyncAndManualUpload">
            {{ "licenseAndBillingManagementDesc" | i18n }}
          </bit-label>
          <h3 *ngIf="showAutomaticSyncAndManualUpload" class="tw-font-semibold tw-mt-6">
            {{ "uploadLicense" | i18n }}
          </h3>
          <app-update-license
            [showAutomaticSyncAndManualUpload]="showAutomaticSyncAndManualUpload"
            [organizationId]="organizationId"
            [showCancel]="false"
            (onUpdated)="licenseUploaded()"
          ></app-update-license>
        </ng-container>
      </bit-radio-group>
    </form>
  </ng-container>
</bit-container>
