<form
  [formGroup]="formGroup"
  [bitSubmit]="submit"
  bit-dialog
  dialogSize="large"
  [loading]="loading"
>
  <span bitDialogTitle>
    {{ "connectIntegrationButtonDesc" | i18n: connectInfo.settings.name }}
  </span>
  <div bitDialogContent class="tw-flex tw-flex-col tw-gap-4">
    @if (loading) {
      <ng-container #spinner>
        <bit-icon name="bwi-spinner" class="bwi-lg bwi-spin" aria-hidden="true"></bit-icon>
      </ng-container>
    }
    @if (!loading) {
      <ng-container>
        <bit-form-field>
          <bit-label>{{ "url" | i18n }}</bit-label>
          <input bitInput type="text" formControlName="url" placeholder="{{ urlHelperLinkText }}" />
        </bit-form-field>

        <bit-form-field>
          <bit-label>{{ "apiKey" | i18n }}</bit-label>
          <input bitInput type="password" formControlName="apiKey" />
          <bit-hint>{{ "apiKey" | i18n }}</bit-hint>
        </bit-form-field>
      </ng-container>
    }
  </div>
  <ng-container bitDialogFooter>
    <button type="submit" bitButton bitFormButton buttonType="primary" [disabled]="loading">
      @if (isUpdateAvailable) {
        {{ "update" | i18n }}
      } @else {
        {{ "save" | i18n }}
      }
    </button>
    <button type="button" bitButton bitDialogClose buttonType="secondary" [disabled]="loading">
      {{ "cancel" | i18n }}
    </button>

    @if (canDelete) {
      <div class="tw-ml-auto">
        <button
          bitIconButton="bwi-trash"
          type="button"
          buttonType="dangerGhost"
          label="{{ 'delete' | i18n }}"
          appA11yTitle="{{ 'delete' | i18n }}"
          [bitAction]="delete"
        ></button>
      </div>
    }
  </ng-container>
</form>
