@if (modelProvider()) {
  <copilot-provider
    [providerId]="modelProvider().id"
    class="mb-2 rounded-xl border-[0.5px] border-black/5 shadow-sm"
    (deleted)="removedModelProvider()"
    (addedModel)="onAddedModel($event)"
  />
} @else {
  <div
    class="mb-2 flex w-full cursor-pointer items-center rounded-lg bg-components-list-option-active-bg px-3 py-2 text-base text-text-secondary hover:bg-components-card-bg hover:text-text-primary"
    (click)="openAiProviders()"
  >
    <div class="mr-2 grow leading-5">
      {{ 'PAC.Copilot.SelectAiModelProvider' | translate: { Default: 'Select an AI model provider' } }}
    </div>
    <i class="ri-folder-open-line"></i>
  </div>
}

<form [formGroup]="formGroup" class="relative flex w-full flex-col items-start gap-4 overflow-hidden rounded-xl border-[0.5px] border-solid border-divider-deep bg-background-default-subtle p-4 shadow-sm">
  <copilot-model-select
    class="w-full"
    formControlName="copilotModel"
    [copilot]="copilot()"
    [modelType]="defaultModelType()"
    [label]="'PAC.Copilot.DefaultModel' | translate: { Default: 'Default Model' }"
  />

  <ng-content />

  @if (saving()) {
    <ngm-spin class="absolute top-0 left-0 h-full w-full" />
  }
</form>