@switch (credential()?.type) {
  @case (eCredentialsType.SECRET_INPUT) {
    <div class="relative w-full">
      <input
        tabindex="0"
        class="xp-input block w-full h-9 text-sm"
        type="password"
        [placeholder]="credential().placeholder | i18n"
        [(ngModel)]="valueModel"
      />
    </div>
  }
  @case (eCredentialsType.TEXT_INPUT) {
    <div class="relative w-full">
      <input
        tabindex="0"
        class="xp-input block w-full h-9 text-sm"
        type="text"
        [placeholder]="credential().placeholder | i18n"
        [(ngModel)]="valueModel"
      />
    </div>
  }
  @case (eCredentialsType.INT) {
    <div class="relative w-full">
      <input
        tabindex="0"
        class="xp-input block w-full h-9 text-sm"
        type="number"
        step="1"
        min="1"
        max="100"
        [placeholder]="credential().placeholder | i18n"
        [(ngModel)]="valueModel"
      />
    </div>
  }
  @case (eCredentialsType.NUMBER) {
    <div class="relative w-full">
      <input
        tabindex="0"
        class="xp-input block w-full h-9 text-sm"
        type="number"
        step="0.1"
        min="0"
        [max]="credential().max ?? 1"
        [placeholder]="credential().placeholder | i18n"
        [(ngModel)]="valueModel"
      />
    </div>
  }
  @case (eCredentialsType.BOOLEAN) {
    <z-switch
      class="inline-block ml-auto h-8"
      [zTooltip]="placeholder() | i18n"
      zPosition="left"
      [(ngModel)]="valueModel"
      zSize="sm"
    />
  }
  @case (eCredentialsType.SELECT) {
    <select
      class="xp-input text-text-primary text-sm block w-full"
      [(ngModel)]="valueModel"
    >
      @for (option of options(); track option.value) {
        <option [attr.selected]="valueModel() === option.value" [value]="option.value">
          {{ option.label | i18n }}
        </option>
      }
    </select>
  }
  @case (eCredentialsType.REMOTE_SELECT) {
    <ngm-remote-select
      class="w-full"
      restrict
      [url]="credential().selectUrl"
      [placeholder]="credential().placeholder | i18n"
      [(ngModel)]="valueModel"
      [params]="params()"
      [multiple]="credential().multi"
      (error)="onError($event)"
    />
  }
  @case (eCredentialsType.COPILOT_MODEL) {
    <copilot-model-select
      class="w-full"
      hiddenLabel
      [modelType]="config()?.modelType || eAiModelTypeEnum.LLM"
      [(ngModel)]="valueModel"
    />
  }
}
@if (error()) {
  <div class="p-1 max-w-full truncate text-sm text-red-400" [zTooltip]="error()" zPosition="top">
    {{ error() }}
  </div>
}