<ng-container *ngIf="loading">
  <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>
</ng-container>
<div class="tw-max-w-4xl tw-mx-auto" *ngIf="!loading">
  <div class="tw-mt-5">
    <h1>{{ "setupProvider" | i18n }}</h1>
  </div>
  <p>{{ "setupProviderDesc" | i18n }}</p>
  <form [formGroup]="formGroup" [bitSubmit]="submit">
    <h2 class="tw-mt-5">{{ "billingInformation" | i18n }}</h2>
    <div class="tw-grid tw-grid-flow-col tw-grid-cols-12 tw-gap-4">
      <div class="tw-col-span-6">
        <bit-form-field>
          <bit-label>{{ "providerName" | i18n }}</bit-label>
          <input type="text" bitInput formControlName="name" />
        </bit-form-field>
      </div>
      <div class="tw-col-span-6">
        <bit-form-field>
          <bit-label>{{ "billingEmail" | i18n }}</bit-label>
          <input type="email" bitInput formControlName="billingEmail" />
          <bit-hint>{{ "providerBillingEmailHint" | i18n }}</bit-hint>
        </bit-form-field>
      </div>
    </div>
    <h2 class="tw-mt-5">{{ "paymentMethod" | i18n }}</h2>
    <app-enter-payment-method [group]="formGroup.controls.paymentMethod"></app-enter-payment-method>
    <app-enter-billing-address
      [group]="formGroup.controls.billingAddress"
      [scenario]="{ type: 'checkout', supportsTaxId: true }"
    ></app-enter-billing-address>
    <button class="tw-mt-8" bitButton bitFormButton buttonType="primary" type="submit">
      {{ "submit" | i18n }}
    </button>
  </form>
</div>
