@if (parameterList()) {
  <div class="space-y-2">
    @for (parameter of parameterList(); track parameter.name) {
      <div class="flex flex-col">
        <div class="whitespace-nowrap">
          <span>{{parameter.label | i18n}}</span>
          <span class="px-1 text-xs font-mono truncate text-text-secondary bg-background-default-subtle">
            {{parameter.name}}
          </span>
          @if (parameter.required) {
            <span class="inline-block text-sm font-medium text-[#EC4A0A]">*</span>
          }
        </div>

        @if (variables()) {
          <xpert-variable-input class="w-full px-2 py-1 text-text-primary border-0 rounded-lg grow bg-components-input-bg-normal focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
            [placeholder]="parameter.placeholder | i18n"
            [disabled]="readonly()"
            [variables]="variables()"
            [ngModel]="parameters()?.[parameter.name]"
            (ngModelChange)="onParameter(parameter.name, $event)"
          />
        } @else {
          <input
            z-input
            class=" w-full" [type]="parameter.type || 'text' "
            [ngModel]="parameters()?.[parameter.name]"
            (ngModelChange)="onParameter(parameter.name, $event)">
        }
      </div>
    }
  </div>
} @else if (jsonSchema()) {
  <json-schema-form [schema]="jsonSchema()" [variables]="variables()" [(ngModel)]="parameters" />
}