@if (connector) {
  <form [formGroup]="form">
    @if (!enterCredentials) {
      <nsi-two-columns-configuration-item
        [noTopBorder]="noTopBorder"
        itemTitle="sync.add-page.connector-name.title"
        description="sync.add-page.connector-name.description">
        <div class="form-container">
          <pa-input formControlName="name">{{ 'sync.add-page.connector-name.field-label' | translate }}</pa-input>
        </div>
      </nsi-two-columns-configuration-item>
    }

    <ng-container formGroupName="extra">
      @for (section of getExtraSections() | async; track section.id) {
        <nsi-two-columns-configuration-item
          [badge]="section.badge"
          [itemTitle]="section.title"
          [description]="section.description || ''">
          <div class="form-container">
            @for (field of section.fields; track field.id) {
              @switch (field.type) {
                @case ('text') {
                  <pa-input
                    [formControlName]="field.id"
                    [placeholder]="field.placeholder"
                    [type]="field.secret ? 'password' : 'text'"
                    [help]="field.help">
                    {{ field.label | translate }}
                  </pa-input>
                }
                @case ('boolean') {
                  <pa-toggle
                    [formControlName]="field.id"
                    [help]="field.help">
                    {{ field.label | translate }}
                  </pa-toggle>
                }
                @case ('select') {
                  <pa-select
                    [formControlName]="field.id"
                    [label]="field.label"
                    [help]="field.help">
                    @for (option of field.options; track option.value) {
                      <pa-option
                        [disabled]="option.disabled"
                        [value]="option.value">
                        {{ option.label | translate }}
                      </pa-option>
                    }
                  </pa-select>
                }
                @case ('textarea') {
                  <pa-textarea
                    [formControlName]="field.id"
                    [help]="field.help"
                    [rows]="4">
                    {{ field.label | translate }}
                  </pa-textarea>
                }
                @case ('table') {
                  <div class="table-container">
                    <label>{{ field.label | translate }}</label>
                    @if (field.help) {
                      <p>{{ field.help | translate }}</p>
                    }
                    <app-parameters-table
                      [values]="tables[field.id] || []"
                      (valuesChange)="updateTable(field.id, $event)"></app-parameters-table>
                    @if (invalidTables.includes(field.id)) {
                      <nsi-info-card
                        type="warning"
                        icon="warning">
                        {{ 'sync.form-validation.extra-parameters-incomplete' | translate }}
                      </nsi-info-card>
                    }
                  </div>
                }
                @case ('file') {
                  <div>
                    <pa-button
                      iconAndText
                      icon="add-file"
                      size="small"
                      aspect="basic"
                      (click)="file.click()">
                      {{ files[field.id] ? files[field.id].name : (field.label | translate) }}
                    </pa-button>
                    @if (field.help) {
                      <div class="file-help">{{ field.help | translate }}</div>
                    }
                    <input
                      id="file"
                      type="file"
                      [accept]="field.accept"
                      #file
                      hidden
                      (change)="updateFile($event, field.id, field.handleFile)" />
                  </div>
                }
                @case ('hint') {
                  <ncom-hint [label]="field.label | translate">
                    <div [innerHTML]="field.help || '' | translate"></div>
                  </ncom-hint>
                }
              }
            }
          </div>
        </nsi-two-columns-configuration-item>
      }
    </ng-container>

    @if (assumeRole && enterCredentials) {
      <nsi-two-columns-configuration-item
        [noTopBorder]="noTopBorder"
        itemTitle="sync.add-page.assume-role.title"
        description="sync.add-page.assume-role.description">
        <div
          class="form-container"
          formGroupName="assumeRole">
          <pa-input formControlName="external_id">
            {{ 'sync.add-page.assume-role.external-id.label' | translate }}
          </pa-input>
          <pa-input formControlName="role_arn">
            {{ 'sync.add-page.assume-role.role-arn.label' | translate }}
          </pa-input>
          <div class="align-right">
            <pa-button
              aspect="basic"
              iconAndText
              icon="info"
              (click)="openAssumeRoleModal()">
              {{ 'sync.add-page.assume-role.role-arn.button' | translate }}
            </pa-button>
          </div>
          <nsi-info-card>{{ 'sync.add-page.assume-role.reuse' | translate }}</nsi-info-card>
        </div>
      </nsi-two-columns-configuration-item>
    }

    @if (!isCloud) {
      <nsi-two-columns-configuration-item
        badge="generic.badge.optional"
        itemTitle="sync.add-page.add-labels.title"
        description="sync.add-page.add-labels.description">
        <div class="form-container toggle-container">
          <pa-toggle
            withBackground
            formControlName="preserveLabels">
            {{ 'sync.add-page.preserve-labels.toggle-label' | translate }}
          </pa-toggle>
        </div>
      </nsi-two-columns-configuration-item>
    }

    @if (!isCloud && connector.canSyncSecurityGroups) {
      <nsi-two-columns-configuration-item
        itemTitle="sync.add-page.security-group.title"
        description="sync.add-page.security-group.description"
        badge="generic.badge.advanced">
        <div class="form-container toggle-container">
          <pa-toggle
            withBackground
            formControlName="syncSecurityGroups">
            {{ 'sync.add-page.security-group.toggle-label' | translate }}
          </pa-toggle>
        </div>
      </nsi-two-columns-configuration-item>
    }
  </form>

  @if (!isCloud) {
    <nsy-sync-options-form
      [isCloud]="isCloud || false"
      [existingConfig]="syncEntity"
      (optionsChange)="onOptionsChange($event)"></nsy-sync-options-form>
  }
}