<app-configuration-form
  [form]="form"
  (cancel)="cancel.emit()"
  (triggerSubmit)="submit()">
  <ng-container [formGroup]="configForm">
    <div class="form-entry field-list">
      <div class="form-entry">
        <label for="sources">{{ 'retrieval-agents.workflow.node-types.ask.form.sources' | translate }}</label>
        <pa-select
          id="sources"
          formControlName="sources"
          externalLabel=""
          multiple=""
          [options]="sourceOptions()"></pa-select>
      </div>
      @if (sourceOptions()?.length === 0) {
        <nsi-info-card type="warning">
          {{ 'retrieval-agents.workflow.node-types.ask.form.no-source' | translate }}
        </nsi-info-card>
        <pa-button
          aspect="basic"
          size="small"
          [routerLink]="driversPath()">
          {{ 'retrieval-agents.workflow.node-types.ask.form.go-to-drivers' | translate }}
        </pa-button>
      }
    </div>

    <pa-toggle
      formControlName="ai_parameter_search"
      withBackground>
      {{ 'retrieval-agents.workflow.node-types.ask.form.customize-parameters' | translate }}
    </pa-toggle>

    @if (isCustomized) {
      <div class="form-entry">
        <label for="rephrase_semantic_custom_prompt">
          {{ 'retrieval-agents.workflow.node-types.ask.form.rephrase_semantic_custom_prompt' | translate }}
        </label>
        <nsi-expandable-textarea
          id="rephrase_semantic_custom_prompt"
          formControlName="rephrase_semantic_custom_prompt"
          externalLabel=""
          rows="2"
          modalTitle="retrieval-agents.workflow.node-types.ask.form.rephrase_semantic_custom_prompt"
          resizable="true"></nsi-expandable-textarea>
      </div>
      <div class="form-entry">
        <label for="rephrase_lexical_custom_prompt">
          {{ 'retrieval-agents.workflow.node-types.ask.form.rephrase_lexical_custom_prompt' | translate }}
        </label>
        <nsi-expandable-textarea
          id="rephrase_lexical_custom_prompt"
          formControlName="rephrase_lexical_custom_prompt"
          externalLabel=""
          rows="2"
          modalTitle="retrieval-agents.workflow.node-types.ask.form.rephrase_lexical_custom_prompt"
          resizable="true"></nsi-expandable-textarea>
      </div>
      <!-- FIXME: we don't know what this field is for, to be checked with Ramon -->
      <!-- <div class="form-entry">
      <label for="keywords_custom_prompt">
        {{ 'retrieval-agents.workflow.node-types.ask.form.keywords_custom_prompt' | translate }}
      </label>
      <nsi-expandable-textarea
        id="keywords_custom_prompt"
        formControlName="keywords_custom_prompt"
        externalLabel=""
        rows="2"
        modalTitle="retrieval-agents.workflow.node-types.ask.form.keywords_custom_prompt"
        resizable="true"></nsi-expandable-textarea>
    </div> -->

      <div class="form-entry field-list">
        <pa-toggle
          formControlName="vllm"
          withBackground>
          {{ 'retrieval-agents.workflow.node-types.ask.form.vllm' | translate }}
        </pa-toggle>
        @if (vllmEnabled) {
          <div class="form-entry">
            <label for="visual_enable_prompt">
              {{ 'retrieval-agents.workflow.node-types.ask.form.visual_enable_prompt' | translate }}
            </label>
            <nsi-expandable-textarea
              id="visual_enable_prompt"
              formControlName="visual_enable_prompt"
              externalLabel=""
              rows="2"
              modalTitle="retrieval-agents.workflow.node-types.ask.form.visual_enable_prompt"
              resizable="true"></nsi-expandable-textarea>
          </div>
        }
      </div>

      <div class="form-entry field-list">
        <div class="form-entry">
          <label for="filters">
            {{ 'retrieval-agents.workflow.node-types.ask.form.filters.label' | translate }}
          </label>
          <nsi-expandable-textarea
            id="filters"
            formControlName="filters"
            externalLabel=""
            rows="2"
            help="retrieval-agents.workflow.node-types.ask.form.filters.help"
            modalTitle="retrieval-agents.workflow.node-types.ask.form.filters.label"
            resizable="true"></nsi-expandable-textarea>
        </div>
        <nsi-info-card>
          <span [innerHTML]="'retrieval-agents.workflow.node-types.ask.form.filters.info' | translate"></span>
        </nsi-info-card>
      </div>

      <pa-toggle
        formControlName="full_resource"
        withBackground>
        {{ 'search.configuration.generative-answer.rag-strategies.entire-resource.toggle-label' | translate }}
      </pa-toggle>

      <div class="form-entry field-list">
        <nsi-info-card>
          {{
            'search.configuration.generative-answer.rag-strategies.neighbouring-paragraphs.toggle-description'
              | translate
          }}
        </nsi-info-card>
        <div class="form-entry">
          <label for="before">
            {{ 'search.configuration.generative-answer.rag-strategies.neighbouring-paragraphs.preceding' | translate }}
          </label>
          <pa-input
            id="before"
            formControlName="before"
            type="number"
            externalLabel=""></pa-input>
        </div>
        <div class="form-entry">
          <label for="after">
            {{ 'search.configuration.generative-answer.rag-strategies.neighbouring-paragraphs.succeeding' | translate }}
          </label>
          <pa-input
            id="after"
            formControlName="after"
            type="number"
            externalLabel=""></pa-input>
        </div>
      </div>
      <div class="form-entry field-list">
        <div class="form-entry">
          <label for="extra_fields">
            {{ 'search.configuration.generative-answer.rag-strategies.specific-fields.toggle-label' | translate }}
          </label>
          <nsi-expandable-textarea
            id="extra_fields"
            formControlName="extra_fields"
            resizable
            rows="2"
            [placeholder]="
              'search.configuration.generative-answer.rag-strategies.specific-fields.field-ids.textarea-label' | translate
            "
            modalTitle="search.configuration.generative-answer.rag-strategies.specific-fields.toggle-label"
            help="search.configuration.generative-answer.rag-strategies.specific-fields.field-ids.info-box"></nsi-expandable-textarea>
        </div>
      </div>

      <div class="form-entry">
        <label for="security_groups">
          {{ 'retrieval-agents.workflow.node-types.ask.form.security_groups.label' | translate }}
        </label>
        <nsi-expandable-textarea
          id="security_groups"
          formControlName="security_groups"
          externalLabel=""
          rows="2"
          help="retrieval-agents.workflow.node-types.ask.form.security_groups.help"
          modalTitle="retrieval-agents.workflow.node-types.ask.form.security_groups.label"
          resizable="true"></nsi-expandable-textarea>
      </div>
      <app-rules-field
        [form]="configForm"
        [config]="config"></app-rules-field>
    }
  </ng-container>
</app-configuration-form>
