<form
  [formGroup]="configForm"
  (ngSubmit)="save()">
  @if (learningConfigurations; as learningConfig) {
    <nsi-two-columns-configuration-item
      noTopBorder
      itemTitle="kb.ai-models.answer-generation.select-llm.title"
      description="kb.ai-models.answer-generation.select-llm.description">
      <div class="form-container">
        @if (!currentGenerativeModel) {
          <nsi-info-card
            type="warning"
            icon="warning">
            <span
              [innerHTML]="
                'kb.ai-models.answer-generation.select-llm.unavailable' | translate: { model: generativeModelValue }
              "></span>
          </nsi-info-card>
        }
        @if (learningConfig && learningConfigurations && providers) {
          <stf-model-selector
            formControlName="generative_model"
            [providers]="providers"
            [learningConfigurations]="learningConfigurations"
            [disclaimerExpanded]="true"></stf-model-selector>
          <div [hidden]="!generativeModelValue || isModelConfiguration">
            <stf-user-keys
              [generativeModel]="currentGenerativeModel"
              [learningConfigurations]="learningConfig"
              (formReady)="userKeysForm = $event"></stf-user-keys>
          </div>
        }
      </div>
    </nsi-two-columns-configuration-item>

    <ng-container [formGroup]="userPromptForm">
      @for (userPrompt of userPromptSchemas || {} | keyvalue; track userPrompt.key) {
        <div
          [formGroupName]="userPrompt.key"
          [hidden]="userPrompt.key !== currentGenerativeModel?.user_prompt || isModelConfiguration">
          @if (userPrompt.value.properties['prompt']; as prompt) {
            <nsi-two-columns-configuration-item
              badge="generic.badge.optional"
              [itemTitle]="
                'kb.ai-models.answer-generation.prompt.title'
                  | translate: { provider: keyProviders[userPrompt.key] || userPrompt.key }
              "
              description="kb.ai-models.answer-generation.prompt.description"
              (clickOnUnauthorized)="openUnauthorizedModal('kb.ai-models.answer-generation.set-prompt')">
              <div class="form-container small-gap">
                <nsi-info-card>{{ prompt.info }}</nsi-info-card>
                <pa-select
                  formControlName="prompt_examples"
                  [label]="'kb.ai-models.common.examples' | translate"
                  (valueChange)="setPrompt(userPrompt.key, 'prompt', $event)">
                  @for (option of prompt.examples || []; track option) {
                    <pa-option [value]="option">
                      {{ option }}
                    </pa-option>
                  }
                </pa-select>

                <nsi-expandable-textarea
                  formControlName="prompt"
                  resizable
                  acceptHtmlTags
                  modalTitle="kb.ai-models.common.prompt.label"
                  [rows]="3">
                  {{ 'kb.ai-models.common.prompt.label' | translate }}
                </nsi-expandable-textarea>

                <nsi-info-card
                  type="warning"
                  icon="warning">
                  {{ 'kb.ai-models.common.prompt.warning' | translate }}
                </nsi-info-card>
              </div>
            </nsi-two-columns-configuration-item>
          }
          @if (userPrompt.value.properties['system']; as system) {
            <nsi-two-columns-configuration-item
              badge="generic.badge.optional"
              [itemTitle]="
                'kb.ai-models.answer-generation.behavior.title'
                  | translate: { provider: keyProviders[userPrompt.key] || userPrompt.key }
              "
              description="kb.ai-models.answer-generation.behavior.description"
              (clickOnUnauthorized)="openUnauthorizedModal('kb.ai-models.answer-generation.set-prompt')">
              <div class="form-container small-gap">
                <pa-select
                  formControlName="system_examples"
                  [label]="'kb.ai-models.common.examples' | translate"
                  (valueChange)="setPrompt(userPrompt.key, 'system', $event)">
                  @for (option of system.examples || []; track option) {
                    <pa-option [value]="option">
                      {{ option }}
                    </pa-option>
                  }
                </pa-select>

                <nsi-expandable-textarea
                  formControlName="system"
                  resizable
                  acceptHtmlTags
                  modalTitle="kb.ai-models.answer-generation.behavior.label"
                  [rows]="3">
                  {{ 'kb.ai-models.answer-generation.behavior.label' | translate }}
                </nsi-expandable-textarea>
              </div>
            </nsi-two-columns-configuration-item>
          }
        </div>
      }
    </ng-container>
    <nsi-sticky-footer>
      <pa-button
        aspect="basic"
        [disabled]="pristine"
        (click)="resetForm()">
        {{ 'generic.cancel' | translate }}
      </pa-button>
      <pa-button
        kind="primary"
        type="submit"
        [disabled]="invalid || pristine">
        {{ 'kb.ai-models.common.save' | translate }}
      </pa-button>
    </nsi-sticky-footer>
  }
</form>
