<pa-modal-advanced>
  <pa-modal-title>
    {{ (folderMode ? 'modal.upload_folder' : 'modal.upload.title') | translate }}
  </pa-modal-title>
  <pa-modal-content>
    @if (standalone && (hasValidKey | async) === false) {
      <nsi-info-card
        type="warning"
        icon="warning">
        <div
          class="body-s"
          [innerHTML]="'standalone.upload-no-nua-key' | translate"></div>
      </nsi-info-card>
      <br />
    }
    @if (limitsExceeded) {
      <nsi-info-card
        type="warning"
        icon="warning">
        <div class="title-xs">{{ 'upload.warning.size-limit.title' | translate }}</div>
        <div>
          {{
            'upload.warning.size-limit.limit-details'
              | translate
                : {
                    maxMedia: (maxMediaFileSize | size),
                    max: (maxFileSize | size)
                  }
          }}
        </div>
        <div>{{ 'upload.warning.size-limit.description' | translate }}</div>
      </nsi-info-card>
      <br />
    }

    <div
      stfFileDrop
      class="dropzone"
      [class.file-over]="hasBaseDropZoneOver"
      [class.folder]="folderMode"
      (fileOver)="fileOverBase($event)"
      (atFileDrop)="addFiles($event)"
      (click)="chooseFiles($event)">
      <span>{{ (folderMode ? 'modal.upload.drop_folder' : 'modal.upload.drop') | translate }}</span>
    </div>

    @if (folderMode) {
      <input
        type="file"
        id="upload-folder-chooser"
        multiple
        webkitdirectory
        directory
        hidden />

      <pa-toggle
        [(value)]="useFoldersAsLabels"
        [help]="'upload.use_folder_as_labels.help' | translate">
        {{ 'upload.use_folder_as_labels.label' | translate }}
      </pa-toggle>
    } @else {
      <input
        type="file"
        stfFileSelect
        (atFileSelect)="addFiles($event)"
        id="upload-file-chooser"
        multiple
        hidden />
    }

    @if (!(simpleMode | async) && !useFoldersAsLabels) {
      <app-label-field [(selection)]="selectedLabels"></app-label-field>
    }

    @if (files.length > 0) {
      <div class="file-list">
        @for (item of files; track item) {
          <div
            class="file-item"
            [class.over-limit]="item.aboveLimit">
            <div class="file-name">{{ item.file.name }}</div>
            <div class="file-size">{{ item.file.size | size }}</div>
            <div class="file-actions">
              <pa-button
                icon="trash"
                aspect="basic"
                size="small"
                (click)="removeFile(item.file)">
                {{ 'upload.remove-file' | translate }}
              </pa-button>
            </div>
          </div>
        }
      </div>
    }

    @if (!(simpleMode | async)) {
      <pa-expander [expanded]="false">
        <pa-expander-header>{{ 'upload.advanced.title' | translate }}</pa-expander-header>
        <pa-expander-body>
          <div class="language-detection">
            <pa-toggle
              labelOnRight
              [(value)]="automaticLanguageDetection">
              {{ 'upload.advanced.language-detection.checkbox-label' | translate }}
            </pa-toggle>

            @if (!automaticLanguageDetection) {
              <pa-input
                minlength="2"
                maxlength="11"
                help="upload.advanced.language-detection.input-help"
                [formControl]="langCode">
                {{ 'upload.advanced.language-detection.input-label' | translate }}
              </pa-input>
            }
          </div>
          @if ((extractConfigEnabled | async) && !standalone) {
            <app-extraction-select
              [(extractConfig)]="extractStrategy"
              [(splitConfig)]="splitStrategy"
              [onlyExtract]="!(spitConfigEnabled | async)"></app-extraction-select>
          }
        </pa-expander-body>
      </pa-expander>
    }
    @if (isTrial | async) {
      <ncom-hint
        noMaxWidth
        learnMore="https://docs.nuclia.dev/docs/ingestion/resource#how-to-create-a-resource"
        label="How to upload a file with the API">
        <pre><code>curl $$KB_URL$$/upload \
-X POST \
-H "content-type: video/mp4" \
-H "authorization: Bearer $$AUTH_TOKEN$$" \
-T /path/to/your-video.mp4</code></pre>
        <p>
          Note: the authorization token here will expire. If you want a long-term approach, you should use a service
          access token and put it in the
          <code>X-NUCLIA-SERVICEACCOUNT</code>
          header.
        </p>
      </ncom-hint>
    }
  </pa-modal-content>
  <pa-modal-footer>
    <pa-button
      aspect="basic"
      (click)="cancel()">
      {{ 'generic.cancel' | translate }}
    </pa-button>

    <pa-button
      kind="primary"
      [disabled]="allowedFiles.length === 0 || (!automaticLanguageDetection && (!langCode.value || langCode.invalid))"
      (click)="onUpload()">
      {{ 'generic.add' | translate }}
    </pa-button>
  </pa-modal-footer>
</pa-modal-advanced>
