<div class="page-spacing">
  <div>
    <h1 class="page-title">{{ 'navbar.sync' | translate }}</h1>
    <p class="page-description">{{ 'sync.home-page.description' | translate }}</p>
  </div>

  <section>
    <div class="section-description">
      <div class="title-l">{{ 'sync.home-page.setup-server.title' | translate }}</div>
      <div class="page-description">{{ 'sync.home-page.setup-server.description' | translate }}</div>
    </div>

    <form
      class="setup-sync-agent"
      [formGroup]="syncAgentForm"
      (ngSubmit)="saveSyncServer()">
      <pa-radio-group formControlName="type">
        @if (hasCloudSync | async) {
          <div class="radio-config-row">
            <pa-radio
              [help]="'sync.home-page.setup-server.on-cloud.radio-help' | translate"
              value="cloud">
              <span class="title-m">{{ 'sync.home-page.setup-server.on-cloud.radio-label' | translate }}</span>
            </pa-radio>
            <nsi-badge kind="tertiary">{{ 'generic.badge.beta' | translate }}</nsi-badge>
          </div>
          <div class="separator-line"></div>
        }
        <div class="radio-config-row">
          <pa-radio
            [help]="'sync.home-page.setup-server.on-desktop.radio-help' | translate"
            value="desktop">
            <span class="title-m">{{ 'sync.home-page.setup-server.on-desktop.radio-label' | translate }}</span>
          </pa-radio>

          @if (syncAgentOnDesktop) {
            @if (inactiveServer | async) {
              <nsi-badge>{{ 'sync.badge.inactive' | translate }}</nsi-badge>

              @if (downloadSyncAgentFeature) {
                <nsi-dropdown-button aspect="basic">
                  {{ 'sync.home-page.setup-server.on-desktop.download-dropdown' | translate }}
                </nsi-dropdown-button>
              }
            } @else {
              <nsi-badge kind="success">{{ 'sync.badge.active' | translate }}</nsi-badge>
            }
          }
        </div>
        <div class="separator-line"></div>
        <div class="radio-config-row">
          <pa-radio
            [help]="'sync.home-page.setup-server.on-server.radio-help' | translate"
            value="server">
            <span class="title-m">{{ 'sync.home-page.setup-server.on-server.radio-label' | translate }}</span>
          </pa-radio>

          @if (syncAgentOnServer) {
            <div class="inline-form">
              @if (inactiveServer | async) {
                <nsi-badge>{{ 'sync.badge.inactive' | translate }}</nsi-badge>
              } @else {
                <nsi-badge kind="success">{{ 'sync.badge.active' | translate }}</nsi-badge>
              }
              <pa-input
                class="server-url"
                formControlName="serverUrl">
                Server URL
              </pa-input>
              <pa-button
                [disabled]="!serverUrlChanged"
                type="submit">
                {{ 'generic.save' | translate }}
              </pa-button>
            </div>
          }
        </div>
      </pa-radio-group>
    </form>
  </section>

  <div class="separator-line"></div>

  <section>
    <div class="section-description">
      <div class="title-l">{{ 'sync.home-page.add-sources.title' | translate }}</div>
      <div class="page-description">{{ 'sync.home-page.add-sources.description' | translate }}</div>
    </div>
    <div class="connector-list">
      @for (
        connector of syncAgentTypeControl.value !== 'cloud' ? (connectorList | async) : (cloudConnectorList | async);
        track connector.id
      ) {
        <nsy-connector
          [paTooltip]="
            (syncAgentTypeControl.value !== 'cloud' && (inactiveServer | async)
              ? 'sync.home-page.add-sources.disabled-source-tooltip'
              : ''
            ) | translate
          "
          [disabled]="syncAgentTypeControl.value !== 'cloud' && (inactiveServer | async)"
          [title]="connector.title"
          [logo]="connector.logo"
          (selectConnector)="onSelectConnector(connector)"></nsy-connector>
      }
    </div>
  </section>

  <section>
    <div class="section-description">
      <div class="title-l">{{ 'sync.home-page.sync-list.title' | translate }}</div>
      <div class="page-description">{{ 'sync.home-page.sync-list.description' | translate }}</div>
    </div>

    @if (syncs | async; as syncs) {
      @if (syncs.length === 0) {
        <nsi-info-card icon="info">{{ 'sync.home-page.sync-list.empty-info' | translate }}</nsi-info-card>
      } @else {
        <pa-table
          border
          columns="repeat(5, 1fr) 96px">
          <pa-table-sortable-header [cells]="syncTableHeader"></pa-table-sortable-header>

          @for (sync of syncs; track sync.id) {
            <pa-table-row>
              <pa-table-cell>
                <a
                  [routerLink]="'./' + sync.id"
                  class="body-m black-link">
                  {{ sync.title }}
                </a>
              </pa-table-cell>
              <pa-table-cell>
                @if (sync.connectorId && connectors[sync.connectorId]?.definition; as connector) {
                  <div class="logo-title">
                    <pa-icon
                      size="small"
                      [path]="connector.logo"></pa-icon>
                    {{ connector.title }}
                  </div>
                }
              </pa-table-cell>
              <pa-table-cell>
                <div class="body-s">{{ sync.totalSyncedResources }}</div>
              </pa-table-cell>
              <pa-table-cell>
                @if (!(useCloudSync | async)) {
                  <pa-toggle
                    labelOnRight
                    [value]="!sync.disabled"
                    (valueChange)="toggleSync(sync.id, $event)">
                    {{ sync.disabled ? 'Off' : 'On' }}
                  </pa-toggle>
                }
              </pa-table-cell>
              <pa-table-cell>
                <div class="body-s">
                  @if (sync.lastSyncGMT !== '1970-01-01') {
                    <pa-datetime [datetime]="sync.lastSyncGMT"></pa-datetime>
                  } @else {
                    –
                  }
                </div>
              </pa-table-cell>
              <pa-table-cell-menu>
                <pa-button
                  icon="more-vertical"
                  aspect="basic"
                  size="small"
                  [paPopup]="syncMenu">
                  Menu
                </pa-button>
                <pa-dropdown #syncMenu>
                  <pa-option [routerLink]="'./' + sync.id + '/edit'">
                    {{ 'sync.home-page.sync-list.menu.edit-settings' | translate }}
                  </pa-option>
                  @if (sync.connector?.allowToSelectFolders) {
                    <pa-option [routerLink]="'./' + sync.id + '/edit'">
                      {{ 'sync.home-page.sync-list.menu.edit-folders' | translate }}
                    </pa-option>
                  }
                  <pa-option
                    [routerLink]="'./' + sync.id"
                    [queryParams]="{ section: 'activity' }">
                    {{ 'sync.home-page.sync-list.menu.activity-logs' | translate }}
                  </pa-option>
                  <pa-option
                    destructive
                    (selectOption)="deleteSync(sync)">
                    {{ 'sync.home-page.sync-list.menu.delete' | translate }}
                  </pa-option>
                </pa-dropdown>
              </pa-table-cell-menu>
            </pa-table-row>
          }
        </pa-table>
      }
    }
  </section>
</div>
