@if (learningConfigurations(); as learningConfig) {
  <div class="form-container">
    @if (generativeModel()?.user_key) {
      @if (userKeys(); as userKeys) {
        <div class="separator"></div>
        @if (modelsRequiringUserKey.includes(generativeModel()?.value || '')) {
          <div class="title-s">
            {{
              'kb.ai-models.answer-generation.select-llm.own-key.title'
                | translate
                  : {
                      provider: keyProviders[generativeModel()?.user_key || ''] || generativeModel()?.user_key,
                    }
            }}
          </div>
        } @else {
          <pa-toggle
            labelOnRight
            [formControl]="userKeysToggle"
            (valueChange)="onOwnKeyToggle()">
            {{
              'kb.ai-models.answer-generation.select-llm.own-key.label'
                | translate
                  : {
                      provider: keyProviders[generativeModel()?.user_key || ''] || generativeModel()?.user_key,
                    }
            }}
          </pa-toggle>
        }
        @if (hasOwnKey) {
          @if (showPriorityToggle() && hasPriorityVariant()) {
            <pa-toggle
              labelOnRight
              [value]="isPriorityModel()"
              [disabled]="editMode()"
              [help]="
                (editMode()
                  ? 'kb.ai-models.answer-generation.select-llm.own-key.priority-help-disabled'
                  : 'kb.ai-models.answer-generation.select-llm.own-key.priority-help'
                ) | translate
              "
              (valueChange)="togglePriority($event)">
              {{ 'kb.ai-models.answer-generation.select-llm.own-key.priority-label' | translate }}
            </pa-toggle>
          }
          @if (isPriorityModel() && !editMode()) {
            <nsi-info-card class="priority-info">
              {{ 'kb.ai-models.answer-generation.select-llm.own-key.priority-info' | translate }}
            </nsi-info-card>
          }
          <div
            class="keys-container form-container"
            [formGroup]="userKeysGroup">
            @for (field of userKeysPropertiesEntries; track field.key) {
              @if (field.value.isSubForm) {
                <div [formGroupName]="field.key">
                  <div class="title-s">
                    {{ field.value.title }}
                  </div>
                  <div class="subfields form-container">
                    @for (subfield of field.value.properties; track subfield.key) {
                      @if (subfield.value.type === 'boolean') {
                        <pa-toggle
                          [formControlName]="subfield.key"
                          [help]="subfield.value.description">
                          {{ subfield.value.title }}
                        </pa-toggle>
                      } @else if (subfield.value.type === 'number' || subfield.value.type === 'integer') {
                        <pa-input
                          [formControlName]="subfield.key"
                          type="number"
                          [step]="subfield.value.type === 'number' ? '0.01' : '1'"
                          [help]="subfield.value.description">
                          {{ subfield.value.title }}
                        </pa-input>
                      } @else if (subfield.value.values) {
                        <div>
                          <label [for]="subfield.key">{{ subfield.value.title }}</label>
                          <p class="body-s">{{ subfield.value.description }}</p>
                          <pa-radio-group [formControlName]="subfield.key">
                            @for (value of subfield.value.values; track value.value) {
                              <pa-radio [value]="value.value">
                                {{ value.label }}
                              </pa-radio>
                            }
                          </pa-radio-group>
                        </div>
                      } @else {
                        <pa-input
                          [formControlName]="subfield.key"
                          [help]="subfield.value.description">
                          {{ subfield.value.title }}
                        </pa-input>
                      }
                    }
                  </div>
                </div>
              } @else {
                @if (field.value['widget'] === 'textarea') {
                  <nsi-expandable-textarea
                    resizable
                    [formControlName]="field.key"
                    [rows]="2"
                    [help]="
                      (userKeys.required?.includes(field.key) ? required + ' ' : '') + (field.value.description || '')
                    "
                    [modalTitle]="field.value.title">
                    {{ field.value.title }}
                  </nsi-expandable-textarea>
                } @else if (field.value.values) {
                  <div>
                    <label [for]="field.key">{{ field.value.title }}</label>
                    <p class="body-s">{{ field.value.description }}</p>
                    <pa-radio-group [formControlName]="field.key">
                      @for (value of field.value.values; track value.value) {
                        <pa-radio [value]="value.value">
                          {{ value.label }}
                        </pa-radio>
                      }
                    </pa-radio-group>
                  </div>
                } @else {
                  <pa-input
                    [formControlName]="field.key"
                    [help]="
                      (userKeys.required?.includes(field.key) ? required + ' ' : '') + (field.value.description || '')
                    ">
                    {{ field.value.title }}
                  </pa-input>
                }
              }
            }
          </div>
        }
      }
    }
  </div>
}