<stf-lab-layout
  #labLayout
  class="lab-container"
  formTitle="rag-lab.rag-tab.description"
  type="rag"
  (queriesChange)="onQueriesChange($event)"
  (downloadCsv)="downloadCsv()">
  <form
    [formGroup]="form"
    (ngSubmit)="generate()">
    <div class="field-spacing">
      <div class="title-s">{{ 'rag-lab.rag-tab.configuration.search-config-label' | translate }}</div>
      <div class="checkbox-container">
        @if (searchConfigurations | async; as searchConfigurations) {
          @if (searchConfigDetails | async; as searchConfigDetails) {
            @if (generativeModelMap | async; as generativeModelMap) {
              @for (config of searchConfigurations; track config.id) {
                <div class="checkbox-and-help">
                  <pa-checkbox
                    [formControlName]="config.id"
                    [help]="
                      generativeModelMap[config.generativeAnswer.generativeModel] ||
                      config.generativeAnswer.generativeModel ||
                      ('rag-lab.rag-tab.generatie-model-from-kb'
                        | translate: { model: generativeModelMap[(defaultGenerativeModel | async) || ''] })
                    ">
                    {{
                      (config.id === 'nuclia-standard' ? 'search.configuration.options.nuclia-standard' : config.id)
                        | translate
                    }}
                  </pa-checkbox>
                  <pa-icon
                    name="info"
                    [paPopover]="configDetails"></pa-icon>
                </div>

                <pa-popover #configDetails>
                  @if (searchConfigDetails[$index]; as details) {
                    @if (details.features.length > 0 || details.ragStrategies.length > 0) {
                      <div class="title-xxs">
                        {{ 'rag-lab.rag-tab.configuration.details.options-enabled' | translate }}
                      </div>
                    } @else {
                      <div class="title-xxs">{{ 'rag-lab.rag-tab.configuration.details.no-options' | translate }}</div>
                    }
                    <ul class="config-details-list">
                      @if (details.vectorset) {
                        <li>
                          {{ 'search.configuration.generative-answer.semantic-model.title' | translate }}:
                          {{ details.vectorset }}
                        </li>
                      }

                      @for (feature of details.features; track feature) {
                        <li>{{ feature }}</li>
                      }
                      @if (details.ragStrategies.length > 0) {
                        <li>{{ 'search.configuration.generative-answer.rag-strategies.title' | translate }}</li>
                        <ul class="config-details-list">
                          @for (strategy of details.ragStrategies; track strategy) {
                            <li>{{ strategy }}</li>
                          }
                        </ul>
                      }
                    </ul>
                  }
                </pa-popover>

                @if (config.generativeAnswer.askSpecificResource) {
                  <nsi-info-card
                    type="warning"
                    icon="warning">
                    {{ 'rag-lab.rag-tab.warning.ask-to-resource-ignored' | translate }}
                  </nsi-info-card>
                }
              }
            }
          }
          @if (searchConfigurations.length === 1) {
            <nsi-info-card
              type="warning"
              icon="warning">
              {{ 'rag-lab.rag-tab.no-search-config' | translate }}
              <a routerLink="../search">{{ 'search.title' | translate }}</a>
            </nsi-info-card>
          } @else {
            <nsi-info-card>
              {{ 'rag-lab.rag-tab.configuration.search-page-navigation' | translate }}
              <a routerLink="../search">{{ 'search.title' | translate }}</a>
            </nsi-info-card>
          }
        }
      </div>
    </div>

    <pa-button
      kind="primary"
      type="submit"
      [disabled]="queries.length < 1 || selectedConfigs.length < 1">
      {{ 'rag-lab.common.generate-button' | translate }}
    </pa-button>
  </form>
</stf-lab-layout>
