<form [formGroup]="formGroup" [bitSubmit]="submit">
  <bit-dialog>
    <h1 bitDialogTitle>
      {{ (hasBillingToken ? "viewBillingSyncToken" : "generateBillingSyncToken") | i18n }}
    </h1>
    <div bitDialogContent>
      <app-user-verification formControlName="verification" *ngIf="!clientSecret">
      </app-user-verification>

      <ng-container *ngIf="clientSecret && showRotateScreen">
        <p>{{ "rotateBillingSyncTokenTitle" | i18n }}</p>
        <bit-callout type="warning">
          {{ "rotateBillingSyncTokenWarning" | i18n }}
        </bit-callout>
      </ng-container>

      <div *ngIf="clientSecret && !showRotateScreen">
        <p>{{ "copyPasteBillingSync" | i18n }}</p>
        <bit-form-field>
          <bit-label>{{ "billingSyncKey" | i18n }}</bit-label>
          <input
            bitInput
            id="clientSecret"
            type="text"
            [value]="clientSecret"
            class="tw-font-mono"
            disabled
          />
          <button
            bitIconButton="bwi-clone"
            bitSuffix
            type="button"
            [appCopyClick]="clientSecret"
            [appA11yTitle]="'copyValue' | i18n"
          ></button>
        </bit-form-field>
        <div class="tw-mt-2 tw-text-sm tw-text-muted" *ngIf="showLastSyncText">
          <b class="tw-font-semibold">{{ "lastSync" | i18n }}:</b>
          {{ lastSyncDate | date: "medium" }}
        </div>
        <div class="tw-mt-2 tw-text-sm tw-text-danger" *ngIf="showAwaitingSyncText">
          <i class="bwi bwi-error"></i>
          {{
            (daysBetween === 1 ? "awaitingSyncSingular" : "awaitingSyncPlural") | i18n: daysBetween
          }}
        </div>
      </div>
    </div>
    <ng-container bitDialogFooter>
      <button
        type="submit"
        bitButton
        bitFormButton
        buttonType="primary"
        *ngIf="!clientSecret || showRotateScreen"
      >
        {{ submitButtonText }}
      </button>
      <button bitButton bitDialogClose type="button" *ngIf="!showRotateScreen">
        {{ "close" | i18n }}
      </button>
      <button bitButton type="button" *ngIf="showRotateScreen" (click)="cancelRotate()">
        {{ "cancel" | i18n }}
      </button>
      <button
        bitButton
        type="button"
        *ngIf="clientSecret && !showRotateScreen"
        (click)="rotateToken()"
      >
        {{ "rotateToken" | i18n }}
      </button>
    </ng-container>
  </bit-dialog>
</form>
