<pa-modal-advanced fitContent>
  <pa-modal-title>
    <h2>
      {{ createMode ? ('account.models.model-configs.create' | translate) : (generativeModel | async)?.name }}
    </h2>
  </pa-modal-title>

  <pa-modal-content>
    <form
      class="form"
      [formGroup]="configForm">
      @if (createMode) {
        <pa-select
          formControlName="default_model_id"
          [label]="'account.models.model-configs.generative-model' | translate"
          [options]="generativeModelOptions | async"></pa-select>
      }
      <pa-input
        formControlName="description"
        [errorMessages]="validationMessages.description"
        [help]="'generic.required-field' | translate">
        {{ 'generic.description' | translate }}
      </pa-input>
      @if (createMode) {
        <pa-select
          formControlName="zone"
          [label]="'generic.zone' | translate"
          [options]="zoneOptions || []"></pa-select>
      }
      <ng-container [formGroup]="promptsForm">
        @if (userPrompt | async; as prompt) {
          <nsi-expandable-textarea
            formControlName="prompt"
            rows="3"
            [help]="prompt.info ? prompt.info : ''"
            modalTitle="Prompt">
            Prompt
          </nsi-expandable-textarea>
        }
        @if (systemPrompt | async; as prompt) {
          <nsi-expandable-textarea
            formControlName="system"
            rows="3"
            [help]="prompt.info ? prompt.info : ''"
            modalTitle="account.models.model-configs.system-prompt">
            {{ 'account.models.model-configs.system-prompt' | translate }}
          </nsi-expandable-textarea>
        }
      </ng-container>

      @if ((isBedrockIntegrationEnabled | async) && (showAssumeRole | async)) {
        <pa-toggle
          formControlName="useBedrock"
          labelOnRight>
          {{ 'account.models.model-configs.use-bedrock' | translate }}
        </pa-toggle>
      }
      @if (schema | async; as schema) {
        @if (generativeModel | async; as generativeModel) {
          <stf-user-keys
            [generativeModel]="generativeModel"
            [learningConfigurations]="schema"
            (formReady)="initUserKeys($event)"></stf-user-keys>
        }
      }

      @if (((kbList | async) || []).length > 0) {
        <pa-toggle
          [(value)]="isRestricted"
          labelOnRight>
          {{ 'account.models.model-configs.limit' | translate }}
        </pa-toggle>
        @if (isRestricted) {
          <div class="checkboxes">
            @for (item of kbList | async; track item.id) {
              <pa-checkbox [(value)]="selectedKbs[item.id]">{{ item.title }}</pa-checkbox>
            }
          </div>
        }
      }
    </form>
  </pa-modal-content>

  <pa-modal-footer>
    <pa-button
      aspect="basic"
      (click)="close()">
      {{ 'generic.cancel' | translate }}
    </pa-button>
    <pa-button
      kind="primary"
      type="submit"
      [disabled]="invalid"
      (click)="save()">
      {{ 'generic.save' | translate }}
    </pa-button>
  </pa-modal-footer>
</pa-modal-advanced>
