<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>
          <i class="bwi bwi-spinner bwi-lg bwi-spin" aria-hidden="true"></i>
        </ng-container>
      }
      @if (!loading) {
        <ng-container>
          <bit-form-field>
            <bit-label>{{ "url" | i18n }}</bit-label>
            <input
              bitInput
              type="text"
              formControlName="url"
              placeholder="https://api.<region>.datadoghq.com"
            />
          </bit-form-field>

          <bit-form-field>
            <bit-label>{{ "apiKey" | i18n }}</bit-label>
            <input bitInput type="text" 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="danger"
            label="'delete' | i18n"
            [appA11yTitle]="'delete' | i18n"
            [bitAction]="delete"
          ></button>
        </div>
      }
    </ng-container>
  </bit-dialog>
</form>
