<h3>{{ addModel ? 'Add model' : name }}</h3>
<form
  [formGroup]="modelForm"
  (ngSubmit)="save()">
  <pa-input formControlName="description">Name</pa-input>
  <pa-input
    formControlName="location"
    [readonly]="!addModel"
    help='Use format: "provider:model"'>
    Model
  </pa-input>
  <pa-select
    formControlName="model_types"
    [options]="modelTypes"
    multiple
    label="Model types"></pa-select>
  <pa-select
    formControlName="zone"
    [options]="zones | async"
    [readonly]="!addModel"
    label="Zone"></pa-select>

  @if (schema | async; as schema) {
    @if (openaiCompat | async; as openaiCompat) {
      <stf-user-keys
        [generativeModel]="openaiCompat"
        [learningConfigurations]="schema"
        (formReady)="userKeysForm = $event"></stf-user-keys>
    }
  }

  <footer>
    <pa-button
      type="submit"
      [disabled]="pristine || invalid || isSaving">
      Save
    </pa-button>
  </footer>
</form>
