<stf-lab-layout
  #labLayout
  class="lab-container"
  formTitle="rag-lab.prompt-lab.page-description"
  type="prompt"
  (queriesChange)="onQueriesChange($event)"
  (downloadCsv)="downloadCsv()">
  <form
    [formGroup]="form"
    (ngSubmit)="generate()">
    <div class="field-spacing search-config">
      <div class="title-s">{{ 'rag-lab.prompt-lab.configuration.search-config.title' | translate }}</div>
      <pa-select [(value)]="currentConfig">
        @for (config of (searchConfigurations | async) || []; track config.id) {
          <pa-option [value]="config.id">
            @if (config.id === 'nuclia-standard') {
              {{ 'search.configuration.options.nuclia-standard' | translate }}
            } @else {
              {{ config.id }}
            }
          </pa-option>
        }
      </pa-select>
    </div>
    <div class="field-spacing">
      <div class="title-s">{{ 'rag-lab.prompt-lab.configuration.prompt.title' | translate }}</div>
      <pa-select
        dim
        class="select-with-background"
        [label]="'rag-lab.prompt-lab.configuration.prompt.example' | translate"
        (valueChange)="setPrompt($event)">
        @for (option of promptExamples || []; track option) {
          <pa-option [value]="option">
            {{ option }}
          </pa-option>
        }
      </pa-select>
      <div class="field-and-button">
        <nsi-expandable-textarea
          resizable
          acceptHtmlTags
          rows="3"
          modalTitle="rag-lab.prompt-lab.configuration.prompt.label"
          [(value)]="currentPrompt"
          [help]="'rag-lab.prompt-lab.configuration.prompt.placeholder' | translate"
          (resizing)="updateFormContent()">
          {{ 'rag-lab.prompt-lab.configuration.prompt.label' | translate }}
        </nsi-expandable-textarea>
      </div>
    </div>
    <div class="field-spacing">
      <pa-select
        dim
        class="select-with-background"
        [label]="'rag-lab.prompt-lab.configuration.prompt.example' | translate"
        (valueChange)="setSystemPrompt($event)">
        @for (option of systemPromptExamples || []; track option) {
          <pa-option [value]="option">
            {{ option }}
          </pa-option>
        }
      </pa-select>
      <div class="field-and-button">
        <nsi-expandable-textarea
          resizable
          acceptHtmlTags
          rows="3"
          modalTitle="rag-lab.prompt-lab.configuration.system-prompt.label"
          [(value)]="currentSystemPrompt"
          [help]="'rag-lab.prompt-lab.configuration.system-prompt.placeholder' | translate"
          (resizing)="updateFormContent()">
          {{ 'rag-lab.prompt-lab.configuration.system-prompt.label' | translate }}
        </nsi-expandable-textarea>
      </div>
    </div>

    <div class="field-spacing">
      <div class="title-s">{{ 'rag-lab.prompt-lab.configuration.models.title' | translate }}</div>
      <div class="providers-container">
        @if (generativeProviders | async; as generativeProviders) {
          @for (provider of generativeProviders; track provider.title) {
            <div>
              <div class="title-s">{{ provider.title }}</div>
              <div class="checkbox-container">
                @for (model of provider.models | keyvalue; track model.key) {
                  <pa-checkbox
                    [formControlName]="model.key"
                    [help]="model.value.description || ''">
                    {{ model.value.title }}
                  </pa-checkbox>
                }
              </div>
            </div>
          }
        }
      </div>
    </div>
    <pa-button
      kind="primary"
      type="submit"
      [disabled]="queries.length < 1 || selectedModels.length < 1">
      {{ 'rag-lab.common.generate-button' | translate }}
    </pa-button>
  </form>
</stf-lab-layout>
