<pa-modal-advanced fitContent>
  <pa-modal-title>
    <h2>{{ createMode ? ('kb.ai-models.extraction.create' | translate) : config?.name || id }}</h2>
    @if (!!id) {
      <span class="title-xxs">({{ id }})</span>
    }
  </pa-modal-title>

  <pa-modal-content>
    <form
      class="form"
      [formGroup]="configForm">
      <pa-input
        formControlName="name"
        [errorMessages]="validationMessages.name">
        {{ 'kb.ai-models.extraction.name' | translate }}
      </pa-input>
      <div>
        <h4>{{ 'kb.ai-models.extraction.extract.processing.title' | translate }}</h4>
        <div class="processings">
          @if (visualLLMEnabled | async) {
            <div class="container-with-border">
              <pa-checkbox
                formControlName="vllm_config"
                [help]="'kb.ai-models.extraction.extract.processing.vllm_config.help' | translate">
                {{ 'kb.ai-models.extraction.extract.processing.vllm_config.label' | translate }}
              </pa-checkbox>
              @if (vllm_config) {
                <div class="extra-fields">
                  <stf-llm-configuration
                    [providers]="providers"
                    [learningConfigurations]="learningConfigurations"
                    [createMode]="createMode"
                    rulesDescription="kb.ai-models.extraction.extract.rules-description"
                    rulesPlaceholder="kb.ai-models.extraction.extract.rules-placeholder"
                    [vllmOnly]="true"
                    [config]="config?.vllm_config"
                    (valueChange)="vllmConfig = $event"
                    (statusChange)="vllmConfigStatus = $event"></stf-llm-configuration>
                </div>
              }
            </div>
          }
          @if (aiTablesEnabled | async) {
            <div class="container-with-border">
              <pa-checkbox
                formControlName="ai_tables"
                [help]="'kb.ai-models.extraction.extract.processing.ai_tables.help' | translate">
                {{ 'kb.ai-models.extraction.extract.processing.ai_tables.label' | translate }}
              </pa-checkbox>
              @if (ai_tables) {
                <div class="extra-fields">
                  <stf-llm-configuration
                    [providers]="providers"
                    [learningConfigurations]="learningConfigurations"
                    [createMode]="createMode"
                    rulesDescription="kb.ai-models.extraction.extract.rules-description"
                    rulesPlaceholder="kb.ai-models.extraction.extract.rules-placeholder"
                    [config]="config?.ai_tables"
                    [isAiTable]="true"
                    (valueChange)="aiTables = $event"
                    (statusChange)="aiTablesStatus = $event"></stf-llm-configuration>
                </div>
              }
            </div>
          }
        </div>
      </div>
    </form>
  </pa-modal-content>

  @if (createMode) {
    <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>
