@if (page() === 'general') {
  <div class="space-y-5">
    <div class="flex items-center gap-4">
      <emoji-avatar editable class="size-14 shrink-0 overflow-hidden rounded-xl" [formControl]="general.avatar" />
      <div class="min-w-0">
        <div class="text-base font-medium">{{ 'XP.XpertSettings.Avatar' | translate }}</div>
        <p class="mt-1 text-sm text-text-tertiary">{{ 'XP.XpertSettings.AvatarTip' | translate }}</p>
      </div>
    </div>
    <div>
      <label for="assistant-title" class="mb-2 block text-base font-medium">{{ 'XP.Xpert.Title' | translate }}</label
      ><input id="assistant-title" z-input class="h-10 w-full" [formControl]="general.title" />
    </div>
    <div>
      <label for="assistant-description" class="mb-2 block text-base font-medium">{{
        'XP.Xpert.Description' | translate
      }}</label
      ><textarea
        id="assistant-description"
        z-input
        class="min-h-28 w-full resize-y"
        [formControl]="general.description"
      ></textarea>
    </div>
    <div>
      <div class="mb-2 text-base font-medium">{{ 'XP.Xpert.Tags' | translate }}</div>
      <tag-select [category]="tagCategory" [formControl]="general.tags" />
    </div>
    <div class="space-y-4 border-t border-divider-regular pt-4">
      <div>
        <div class="text-base font-medium">{{ 'XP.Xpert.Name' | translate }}</div>
        <p class="mt-2 break-all rounded-lg bg-background-default-subtle px-3 py-2.5 text-sm text-text-secondary">
          {{ editor.source.draft().team.name }}
        </p>
        <p class="mt-2 text-sm text-text-tertiary">{{ 'XP.XpertSettings.NameReadOnly' | translate }}</p>
      </div>
      <div class="flex justify-between gap-4 text-base">
        <span class="text-text-secondary">{{ 'XP.Xpert.WorkspaceDataScope' | translate }}</span
        ><span>{{
          (editor.source.workspaceDataScope === 'user'
            ? 'XP.Xpert.UserIsolatedWorkspaceData'
            : 'XP.Xpert.SharedWorkspaceData'
          ) | translate
        }}</span>
      </div>
    </div>
  </div>
} @else {
  <section class="pb-5">
    <div class="flex items-start justify-between gap-4">
      <div>
        <h3 class="text-lg font-semibold">{{ 'XP.XpertSettings.PrimaryModel' | translate }}</h3>
        <p class="mt-1 text-sm leading-5 text-text-tertiary">
          {{ 'XP.XpertSettings.PrimaryModelTip' | translate }}
        </p>
      </div>
      <span class="rounded-full border border-divider-regular bg-background-default-subtle px-3 py-1 text-sm">{{
        'XP.KEY_WORDS.Default' | translate
      }}</span>
    </div>
    <xp-settings-model-select
      class="mt-3 block w-full rounded-[var(--assistant-settings-item-radius)] border border-divider-regular px-2 py-1"
      [modelType]="modelType"
      [required]="true"
      [control]="models.primary"
    />
    <p class="mt-3 text-sm leading-5 text-text-tertiary">{{ 'XP.XpertSettings.ModelInheritance' | translate }}</p>
  </section>
  <section class="border-t border-divider-regular pt-5">
    <div class="flex items-start justify-between gap-4">
      <div>
        <h3 class="text-lg font-semibold">{{ 'XP.XpertSettings.AllowedModels' | translate }}</h3>
        <p class="mt-1 text-sm leading-5 text-text-tertiary">
          {{ 'XP.XpertSettings.AllowedModelsTip' | translate }}
        </p>
      </div>
      <button type="button" z-button zType="outline" class="shrink-0" (click)="addModel()">
        <i class="ri-add-line" aria-hidden="true"></i>{{ 'XP.XpertSettings.AddModel' | translate }}
      </button>
    </div>
    @if (models.allowed.length) {
      <div
        class="mt-3 overflow-hidden divide-y divide-divider-regular rounded-[var(--assistant-settings-item-radius)] border border-divider-regular"
        cdkDropList
        [cdkDropListData]="models.allowed.controls"
        (cdkDropListDropped)="dropModel($event)"
      >
        @for (control of models.allowed.controls; track control; let index = $index) {
          <div cdkDrag class="flex items-center gap-2 bg-components-card-bg px-2.5 py-1">
            <button
              type="button"
              cdkDragHandle
              class="cursor-grab rounded p-1 text-text-tertiary"
              [attr.aria-label]="'XP.Xpert.ModelSelection.Reorder' | translate"
            >
              <i class="ri-draggable" aria-hidden="true"></i>
            </button>
            <xp-settings-model-select
              class="min-w-0 flex-1"
              [modelType]="modelType"
              [required]="true"
              [control]="control"
            />
            <button
              type="button"
              class="rounded p-1.5 hover:bg-hover-bg disabled:opacity-30"
              [disabled]="$first"
              [attr.aria-label]="'XP.Xpert.ModelSelection.MoveUp' | translate"
              (click)="moveModel(index, -1)"
            >
              <i class="ri-arrow-up-line" aria-hidden="true"></i>
            </button>
            <button
              type="button"
              class="rounded p-1.5 hover:bg-hover-bg disabled:opacity-30"
              [disabled]="$last"
              [attr.aria-label]="'XP.Xpert.ModelSelection.MoveDown' | translate"
              (click)="moveModel(index, 1)"
            >
              <i class="ri-arrow-down-line" aria-hidden="true"></i>
            </button>
            <button
              type="button"
              class="rounded p-1.5 text-text-tertiary hover:bg-hover-bg hover:text-text-destructive"
              [attr.aria-label]="'XP.Xpert.ModelSelection.Remove' | translate"
              (click)="removeModel(index)"
            >
              <i class="ri-delete-bin-line" aria-hidden="true"></i>
            </button>
          </div>
        }
      </div>
    } @else {
      <div
        class="mt-3 rounded-[var(--assistant-settings-item-radius)] border border-dashed border-divider-regular px-3 py-4 text-center text-base text-text-tertiary"
      >
        {{ 'XP.Xpert.ModelSelection.Empty' | translate }}
      </div>
    }
    @if (editor.form.controls.models.invalid && models.allowed.length) {
      <p role="alert" class="mt-3 text-base text-text-destructive">{{ 'XP.XpertSettings.ModelError' | translate }}</p>
    }
    <p class="mt-3 text-sm text-text-tertiary">{{ 'XP.XpertSettings.AllowedModelsFootnote' | translate }}</p>
  </section>
}