<div class="page-spacing">
  <div class="upload-data-page">
    @if (uploadStarted()) {
      <app-resource-handling-banner [kbUrl]="kbUrl()"></app-resource-handling-banner>
    }

    <h1>{{ 'stash.upload_data' | translate }}</h1>
    <p class="body-m">{{ 'stash.upload.page-subtitle' | translate }}</p>

    <div class="upload-options-container">
      <div class="upload-options">
        <stf-upload-option
          icon="file"
          text="stash.upload.option.file"
          (click)="selectUpload('files')"></stf-upload-option>
        <stf-upload-option
          icon="folder"
          text="stash.upload.option.folder"
          (click)="selectUpload('folder')"></stf-upload-option>
        <stf-upload-option
          icon="link"
          text="stash.upload.option.links"
          (click)="selectUpload('link')"></stf-upload-option>
        <stf-upload-option
          icon="file-empty"
          text="stash.upload.option.text"
          (click)="selectUpload('csv')"></stf-upload-option>
        <stf-upload-option
          icon="connectors"
          text="stash.upload.option.sitemap"
          (click)="selectUpload('sitemap')"></stf-upload-option>
        <stf-upload-option
          icon="chat"
          text="stash.upload.option.q-and-a"
          (click)="selectUpload('qna')"></stf-upload-option>
      </div>
    </div>
  </div>

  <nsi-info-card>
    {{ 'stash.upload.go-to-synchronize' | translate }}
    <pa-button
      aspect="basic"
      size="small"
      routerLink="../sync">
      {{ 'generic.go' | translate }}
    </pa-button>
  </nsi-info-card>
</div>
