<div
  class="simple-kb"
  [class.search-view]="view() === 'search'">
  <div
    class="display-m"
    [hidden]="view() === 'search'">
    @if (step() === 1) {
      {{ 'simple.title.first-files' | translate }}
    } @else if (step() === 2) {
      {{ 'simple.title.uploading' | translate }}
    } @else if (step() === 3) {
      {{ 'simple.title.testing' | translate }}
    }
  </div>

  <div class="counters">
    @if (step() === 2) {
      <div>
        <strong>{{ 'simple.ready' | translate }}</strong>
        <span>: {{ counter()?.processed || 0 }}</span>
      </div>
      <div>
        <strong class="title-m">{{ 'simple.in-queue' | translate }}</strong>
        <span>: {{ counter()?.pending || 0 }}</span>
      </div>
      <div>
        <strong class="title-m">{{ 'simple.failed' | translate }}</strong>
        <span>: {{ counter()?.error || 0 }}</span>
      </div>
    } @else if (step() === 3) {
      <div
        class="nav"
        [class.active]="view() === 'resources'"
        (click)="view() !== 'resources' ? changeView('resources') : null">
        @if (view() === 'resources') {
          <pa-icon
            name="folder"
            color="white"></pa-icon>
        } @else {
          <pa-button
            kind="secondary"
            aspect="basic"
            icon="folder">
            {{ 'simple.your-resources' | translate }}
          </pa-button>
        }
        <div>
          <strong>{{ 'simple.your-resources' | translate }}</strong>
          <span>: {{ counter()?.processed || 0 }}</span>
        </div>
      </div>
      <div
        class="nav"
        [class.active]="view() === 'history'"
        (click)="view() !== 'history' ? changeView('history') : null">
        @if (view() === 'history') {
          <pa-icon
            name="clock-dash"
            color="white"></pa-icon>
        } @else {
          <pa-button
            kind="secondary"
            aspect="basic"
            icon="clock-dash">
            {{ 'simple.history' | translate }}
          </pa-button>
        }
        <div>
          <strong>{{ 'simple.history' | translate }}</strong>
        </div>
      </div>
    }
  </div>
  @if (step() === 3) {
    @if (widgetPreview | async; as widgetPreview) {
      @if (view() === 'search') {
        <div class="close-widget">
          <pa-button
            aspect="basic"
            icon="cross"
            (click)="changeView('resources')">
            {{ 'generic.close' | translate }}
          </pa-button>
        </div>
      }
      <div
        #preview
        [class.open]="view() === 'search'"
        class="preview"
        [innerHtml]="widgetPreview.preview"></div>
    }
  }
  <div>
    @if (step() === 1) {
      <div
        stfFileDrop
        class="dropzone"
        [class.file-over]="fileOver()"
        (fileOver)="fileOver.set($event)"
        (atFileDrop)="onFilesSelected($event)">
        <div>{{ 'simple.drop-files' | translate }}</div>
        <div>{{ 'simple.or' | translate }}</div>
        <pa-button
          kind="primary"
          icon="upload"
          iconAndText
          (click)="fileInput.click()">
          {{ 'upload.files' | translate }}
        </pa-button>
        <div class="body-m">{{ 'simple.max-files' | translate: { num: maxFiles } }}</div>
      </div>
    } @else if (step() > 1) {
      @if (view() === 'resources') {
        <app-resource-table></app-resource-table>
      }
      @if (view() === 'history') {
        <app-history-table></app-history-table>
      }
    }
  </div>
</div>
@if (step() > 1) {
  <div class="footer">
    @if (step() === 2) {
      <pa-button
        aspect="basic"
        icon="upload"
        iconAndText
        [disabled]="uploadInProgress()"
        (click)="fileInput.click()">
        {{ 'simple.add-more' | translate }}
      </pa-button>
    } @else if (step() === 3) {
      <pa-button
        kind="primary"
        icon="upload"
        iconAndText
        [disabled]="uploadInProgress()"
        (click)="fileInput.click()">
        {{ 'upload.files' | translate }}
      </pa-button>
      <pa-button
        aspect="basic"
        icon="info"
        iconAndText
        (click)="showMcpEndpoint()">
        {{ 'simple.get-mcp-url' | translate }}
      </pa-button>
    }
  </div>
}
<input
  #fileInput
  type="file"
  stfFileSelect
  (atFileSelect)="onFilesSelected($event)"
  multiple
  hidden />
