<div class="container">
  @if (loading) {
    <div class="loading-shade">
      <nsi-spinner></nsi-spinner>
    </div>
  }

  @if (hasSites && !currentSite()) {
    @if (requiresSiteUrlResolution) {
      <nsi-two-columns-configuration-item
        itemTitle="sync.cloud-folder.resolve-site-title"
        description="sync.cloud-folder.resolve-site-description">
        <div class="resolve-site-input">
          <pa-input
            [formControl]="siteUrlControl"
            (keyup.enter)="resolveAndBrowseSite()">
            {{ 'sync.cloud-folder.enter-site-url' | translate }}
          </pa-input>
          <nsi-button-mini (click)="resolveAndBrowseSite()">{{ 'sync.cloud-folder.browse' | translate }}</nsi-button-mini>
        </div>
      </nsi-two-columns-configuration-item>
    } @else {
      <pa-input
        class="search-sites"
        icon="search"
        [(value)]="searchQuery"
        (keyup.enter)="searchSites()">
        {{ 'sync.cloud-folder.search-sites' | translate }}
      </pa-input>
    }
  }
  @if (requiresBucketSearch) {
    <nsi-two-columns-configuration-item
      itemTitle="sync.cloud-folder.bucket-title"
      noTopBorder>
      <div class="resolve-site-input">
        <pa-input
          [(value)]="bucketName"
          (keyup.enter)="validateAndBrowseDrive(bucketName)">
          {{ 'sync.cloud-folder.bucket-name' | translate }}
        </pa-input>
        <nsi-button-mini (click)="validateAndBrowseDrive(bucketName)">
          {{ 'sync.cloud-folder.browse' | translate }}
        </nsi-button-mini>
      </div>
    </nsi-two-columns-configuration-item>
  }
  @if (currentSite() || (currentDrive() && !requiresBucketSearch) || currentPath()) {
    <div>
      <nsi-button-mini
        icon="undo"
        (click)="back()">
        {{ 'sync.cloud-folder.back' | translate }}
      </nsi-button-mini>
    </div>
    <div class="header">
      <h3>
        @if (currentSite()) {
          {{ currentSite()?.name }}
          @if (currentDrive()) {
            <span>-</span>
          }
        }
        @if (currentDrive()) {
          {{ currentDrive()?.name }}
        }
        @if (this.currentPath()) {
          {{ this.currentPath() }}
        }
        @if (isCurrentSelected()) {
          <pa-icon name="check"></pa-icon>
        }
      </h3>
      @if (currentDrive() || currentPath()) {
        <nsi-button-mini (click)="this.currentPath() ? selectFolder() : selectDrive()">
          {{ 'sync.cloud-folder.select' | translate }}
        </nsi-button-mini>
      }
    </div>
  }

  @if (hasSites && !currentSite()) {
    @if (sites !== undefined) {
      <ul>
        @for (site of sites; track site.id) {
          <li>
            <pa-icon name="folder"></pa-icon>
            {{ site.name }}
            <nsi-button-mini (click)="browseSite(site)">{{ 'sync.cloud-folder.browse' | translate }}</nsi-button-mini>
          </li>
        } @empty {
          <li class="body-m">{{ 'generic.no-results' | translate }}</li>
        }
      </ul>
    }
  } @else if (!currentDrive()) {
    <ul>
      @for (drive of drives; track drive.id) {
        <li>
          <pa-icon name="folder"></pa-icon>
          {{ drive.name }}
          <nsi-button-mini (click)="browseDrive(drive)">{{ 'sync.cloud-folder.browse' | translate }}</nsi-button-mini>
        </li>
      }
      @for (folder of folders; track folder.id) {
        <li>
          <pa-icon name="folder"></pa-icon>
          {{ folder.name }}
          <nsi-button-mini (click)="browseFolder(folder.path)">{{ 'sync.cloud-folder.browse' | translate }}</nsi-button-mini>
        </li>
      }
    </ul>
  } @else {
    <ul>
      @for (folder of folders; track folder.id) {
        <li>
          <pa-icon name="folder"></pa-icon>
          {{ folder.name }}
          <nsi-button-mini
            (click)="browseFolder(folder.path)"
            icon="chevron-down"></nsi-button-mini>
        </li>
      }
    </ul>
  }
</div>
