<pa-modal-dialog>
  <pa-modal-title>
    <div class="dialog-title-with-button">
      {{ 'modal.create_link.title' | translate }}
      <pa-button
        icon="cross"
        aspect="basic"
        (click)="close()">
        {{ 'generic.close' | translate }}
      </pa-button>
    </div>
  </pa-modal-title>
  <pa-modal-content>
    @if (csv.length > pendingResourcesLimit) {
      <nsi-info-card
        type="warning"
        icon="warning">
        {{ 'upload.slow-upload' | translate: { limit: pendingResourcesLimit | number } }}
      </nsi-info-card>
    }
    @if (standalone && (hasValidKey | async) === false) {
      <div
        class="warning body-s"
        [innerHTML]="'standalone.upload-no-nua-key' | translate"></div>
    }

    <form
      id="link-form"
      [formGroup]="linkForm"
      (ngSubmit)="add()">
      <div class="link-form">
        <div class="radio-group-and-label">
          <label
            class="body-m"
            for="linkTo">
            {{ 'modal.create_link.link-to.label' | translate }}
          </label>
          <pa-radio-group
            id="linkTo"
            formControlName="linkTo">
            <pa-radio value="web">{{ 'modal.create_link.link-to.web-page' | translate }}</pa-radio>
            <pa-radio value="file">{{ 'modal.create_link.link-to.file' | translate }}</pa-radio>
          </pa-radio-group>
        </div>

        <div class="radio-group-and-label">
          <label
            class="body-m"
            for="uploadType">
            {{ 'modal.create_link.upload' | translate }}
          </label>
          <pa-radio-group
            id="uploadType"
            formControlName="type">
            <pa-radio value="one">{{ 'modal.create_link.single-link.label' | translate }}</pa-radio>
            <pa-radio value="multiple">{{ 'modal.create_link.multiple-links.label' | translate }}</pa-radio>
            <pa-radio value="csv">{{ 'modal.create_link.csv-file' | translate }}</pa-radio>
          </pa-radio-group>
        </div>
        @if (linkForm.value.type === 'one') {
          <pa-input
            formControlName="link"
            [placeholder]="'modal.create_link.single-link.placeholder' | translate"
            [errorMessages]="validationMessages['link']">
            {{ 'modal.create_link.single-link.label' | translate }}
          </pa-input>
        }
        @if (linkForm.value.type === 'multiple') {
          <pa-textarea
            formControlName="links"
            [placeholder]="'modal.create_link.multiple-links.placeholder' | translate"
            [rows]="5"
            [errorMessages]="validationMessages['link']">
            {{ 'modal.create_link.multiple-links.label' | translate }}
          </pa-textarea>
        }
        @if (linkForm.value.linkTo === 'web' && ['one', 'multiple'].includes(linkForm.value.type || '')) {
          <pa-expander [expanded]="false">
            <pa-expander-header>{{ 'modal.create_link.restrict' | translate }}</pa-expander-header>
            <pa-expander-body>
              <pa-input
                formControlName="css_selector"
                [placeholder]="'modal.create_link.css-selector.placeholder' | translate">
                {{ 'modal.create_link.css-selector.label' | translate }}
              </pa-input>
              <pa-input
                formControlName="xpath"
                [placeholder]="'modal.create_link.xpath-selector.placeholder' | translate"
                [help]="'modal.create_link.xpath-selector.help' | translate">
                {{ 'modal.create_link.xpath-selector.label' | translate }}
              </pa-input>
            </pa-expander-body>
          </pa-expander>
        }
        @if ((extractConfigEnabled | async) && !standalone && linkForm.value.type !== 'csv') {
          <pa-expander
            [contentLoaded]="updateOptionsExpander"
            [expanded]="false">
            <pa-expander-header>{{ 'upload.advanced.title' | translate }}</pa-expander-header>
            <pa-expander-body>
              <div class="options">
                <div>
                  <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>
                <pa-toggle
                  labelOnRight
                  [(value)]="updateExisting">
                  {{ 'upload.advanced.update-existing.label' | translate }}
                </pa-toggle>
                <app-extraction-select
                  [(extractConfig)]="extractStrategy"
                  [(splitConfig)]="splitStrategy"
                  [onlyExtract]="!(splitConfigEnabled | async)"
                  (heightChange)="updateOptionsExpander = updateOptionsExpander + 1"></app-extraction-select>
              </div>
            </pa-expander-body>
          </pa-expander>
        }

        @if (linkForm.value.type === 'csv') {
          <div class="csv-container">
            <app-csv-select
              [help]="['upload.csv_links_description', 'upload.csv_labels', 'upload.csv_css_selector']"
              [fields]="3"
              (select)="checkCsv($event)"></app-csv-select>
            @if (csv.length > 0) {
              <nsi-info-card>
                {{ 'modal.create_link.upload-summary' | translate: { count: csv.length } }}
              </nsi-info-card>
            }
          </div>
        }

        @if (linkForm.value.type !== 'csv') {
          <app-label-field [(selection)]="selectedLabels"></app-label-field>
        }
      </div>

      @if (pending) {
        <nsi-spinner size="small"></nsi-spinner>
      }
    </form>
  </pa-modal-content>
  <pa-modal-footer>
    <pa-button
      aspect="basic"
      (click)="close()">
      {{ 'generic.cancel' | translate }}
    </pa-button>

    <pa-button
      type="submit"
      kind="primary"
      [disabled]="invalid || pending"
      (click)="add()">
      {{ 'generic.add' | translate }}
    </pa-button>
  </pa-modal-footer>
</pa-modal-dialog>
