<div class="page-spacing">
  <nsi-back-button [link]="backPath">
    {{ 'sync.add-page.back-button' | translate }}
  </nsi-back-button>
  @if (connectorId | async; as connectorId) {
    @if (connectorDefinition | async; as connectorDef) {
      <div>
        @if (connectorDef.oauth_provider && connectorDef.apikey_provider && !externalConnection) {
          <div class="oauth-toggle">
            <pa-toggle
              [(value)]="useOAuth"
              labelOnRight>
              {{ 'sync.add-page.use-oauth' | translate }}
            </pa-toggle>
          </div>
        }
        <h1 class="page-title">
          <pa-icon
            [path]="connectorDef.logo"
            size="large"></pa-icon>
          {{ 'sync.add-page.title' | translate: { connector: connectorDef.title } }}
        </h1>
      </div>
    }
  }

  @if (connector | async; as connector) {
    <div>
      @if (loading) {
        <nsi-spinner></nsi-spinner>
      } @else {
        <nsy-configuration-form
          [useOAuth]="useOAuth"
          [enterCredentials]="!!(isCloud | async) && enterCredentials"
          [sync]="sync"
          [kbId]="kbId | async"
          [connector]="connector"
          [connectorId]="connectorId | async"
          [isCloud]="!!(isCloud | async)"
          [assumeRole]="!!(assumeRole | async)"
          (configurationChange)="updateConfiguration($event)"
          (validForm)="validForm = $event"></nsy-configuration-form>
        @if (externalConnection) {
          <nsy-cloud-folder
            [externalConnection]="externalConnection"
            (selection)="selectFolder($event)"></nsy-cloud-folder>
        }
        @if (externalConnection) {
          <nsy-sync-options-form
            [isCloud]="true"
            (optionsChange)="updateCloudSyncOptions($event)"></nsy-sync-options-form>
        }
      }

      <nsi-sticky-footer>
        <pa-button
          aspect="basic"
          (click)="cancel()">
          {{ 'generic.cancel' | translate }}
        </pa-button>

        @if (!!(isCloud | async) && enterCredentials) {
          <pa-button
            kind="primary"
            [disabled]="!validForm || saving"
            (click)="authenticate()">
            {{ 'sync.add-page.footer.auth-button' | translate }}
          </pa-button>
        } @else {
          <pa-button
            kind="primary"
            [disabled]="!validForm || (connector.allowToSelectFolders && !selectedFolder) || saving"
            (click)="save()">
            {{ 'sync.add-page.footer.save-button' | translate }}
          </pa-button>
        }
      </nsi-sticky-footer>
    </div>
  }
</div>
