<form [formGroup]="formGroup" [bitSubmit]="submit" *ngIf="!loading; else spinner">
  <div class="tw-w-full tw-max-w-[1200px]">
    <p class="tw-mt-8" *ngIf="!loading">
      {{ "machineAccountProjectsDescription" | i18n }}
    </p>
    <sm-access-policy-selector
      [loading]="loading"
      formControlName="accessPolicies"
      [addButtonMode]="true"
      [items]="potentialGrantees"
      [label]="'projects' | i18n"
      [hint]="'typeOrSelectProjects' | i18n"
      [columnTitle]="'projects' | i18n"
      [emptyMessage]="'serviceAccountEmptyProjectAccesspolicies' | i18n"
    >
    </sm-access-policy-selector>
    <button bitButton buttonType="primary" bitFormButton type="submit" class="tw-mt-7">
      {{ "save" | i18n }}
    </button>
  </div>
</form>

<ng-template #spinner>
  <div class="tw-items-center tw-justify-center tw-pt-64 tw-text-center">
    <i class="bwi bwi-spinner bwi-spin bwi-3x"></i>
  </div>
</ng-template>
