<div class="page-spacing">
  <nsi-back-button [link]="(editMode | async) ? '../..' : '..'">
    {{ 'sync.add-page.back-button' | translate }}
  </nsi-back-button>
  @if (syncStarted() && isOnboardingActive()) {
    <app-resource-handling-banner [kbUrl]="kbUrl()"></app-resource-handling-banner>
  }
  @if (sync | async; as sync) {
    @if (connectorDef | async; as connectorDef) {
      <div class="details-header">
        <h1 class="page-title">
          <pa-icon
            [path]="connectorDef.logo"
            size="large"></pa-icon>
          {{ sync.title }}
        </h1>

        @if ((editMode | async) === false) {
          <div class="cta-container">
            @if (!sync.isCloud) {
              <div class="toggle-container">
                <pa-toggle
                  withBackground
                  [value]="!sync.disabled"
                  data-cy="active-toggle"
                  (valueChange)="toggleSync($event)">
                  {{ (sync.disabled ? 'sync.badge.inactive' : 'sync.badge.active') | translate }}
                </pa-toggle>
              </div>
            }
            <pa-button
              aspect="basic"
              data-cy="sync-now"
              [disabled]="sync.isCloud ? (isSyncingCloud | async) : (isSyncing | async)"
              (click)="triggerSync()">
              {{ 'sync.details.buttons.sync-now' | translate }}
            </pa-button>
            <pa-button
              aspect="basic"
              routerLink="./edit">
              {{ 'sync.details.buttons.edit-settings' | translate }}
            </pa-button>
            <pa-button
              kind="destructive"
              data-cy="delete"
              (click)="deleteSync()">
              {{ 'sync.details.buttons.delete' | translate }}
            </pa-button>
          </div>
        }
      </div>
    }

    @if (editMode | async) {
      <div>
        <nsy-configuration-form
          noTopBorder
          [sync]="sync"
          [isCloud]="sync.isCloud"
          [kbId]="kbId | async"
          [connector]="connector | async"
          [connectorId]="(connectorDef | async)?.id"
          (configurationChange)="updateConfiguration($event)"
          (validForm)="validForm = $event"></nsy-configuration-form>

        @if (sync.isCloud) {
          <nsy-sync-options-form
            [isCloud]="true"
            [editMode]="true"
            [existingConfig]="sync"
            (optionsChange)="updateCloudOptions($event)"></nsy-sync-options-form>
        }

        <nsi-sticky-footer>
          <pa-button
            aspect="basic"
            routerLink="..">
            {{ 'generic.cancel' | translate }}
          </pa-button>
          <pa-button
            kind="primary"
            (click)="saveChanges()">
            {{ 'sync.details.buttons.save-changes' | translate }}
          </pa-button>
        </nsi-sticky-footer>
      </div>
    } @else {
      <nsy-sync-settings
        [sync]="sync"
        [connector]="connector | async"
        [logs]="sync.isCloud ? (activityLogsCloud | async) : (activityLogs | async)"></nsy-sync-settings>
    }
  }
</div>
