@for (parameter of params(); track parameter.name) {
  <div class="xl:flex flex-col justify-start items-stretch">
    <!-- Render nested parameters recursively if parameter is OBJECT type with items -->
    @if (parameter.type === eXpertParameterTypeEnum.OBJECT && parameter.item && parameter.item.length > 0) {
      <!-- First level parameter title - aligned with other parameters -->
      <div class="xl:flex flex-col justify-start items-stretch">
        <div class="h-6 mb-1 flex justify-start items-center gap-0.5 text-text-secondary">
          @if (!parameter.optional) {
            <span class="text-red-500">*</span>
          }
          <ngm-variable-svg class="shrink-0 w-4 h-4 text-primary-500" />
          <div class="text-sm font-medium text-primary-600">{{parameter.name}}</div>
          <ngm-slash-svg class="" />
          <div class="text-xs truncate text-text-tertiary" [title]="parameter.description | i18n">
            {{ parameter.description | i18n }}
          </div>
        </div>
        
        <!-- Child parameters with indentation and border -->
        <div class="flex flex-col gap-2 border-l-2 border-divider-deep pl-3 ml-2">
          <xpert-parameters-form 
            class="w-full"
            [readonly]="readonly()"
            [parameters]="parameter.item"
            [ngModel]="getNestedValue(parameter.name)"
            (ngModelChange)="updateNestedValue(parameter.name, $event)"
          />
        </div>
      </div>
    } @else {
      <!-- Render flat parameter -->
      <div class="xl:flex flex-col justify-start items-stretch">
        <div class="h-6 mb-1 flex justify-start items-center gap-0.5 text-text-secondary">
          @if (!parameter.optional) {
            <span class="text-red-500">*</span>
          }
          <ngm-variable-svg class="shrink-0 w-4 h-4 text-primary-500" />
          <div class="text-sm text-primary-500">{{parameter.name}}</div>
          <ngm-slash-svg class="" />
          <div class="text-xs truncate text-text-tertiary" [title]="parameter.description | i18n">
            {{ parameter.description | i18n }}
          </div>
        </div>

    @switch (parameter.type) {
      @case (eXpertParameterTypeEnum.TEXT) {
        <input
            class="w-full px-3 text-sm leading-9 text-text-primary border-0 rounded-lg grow h-9 bg-background-default-subtle focus:outline-none focus:ring-1 focus:ring-inset"
            [placeholder]="(parameter.description || parameter.title || parameter.name) + (parameter.optional ? '(' + ('PAC.KEY_WORDS.Optional' | translate: {Default: 'Optional'}) + ')' : '')"
            type="text"
            [attr.maxlength]="parameter.maximum ?? null"
            [disabled]="readonly()"
            [ngModel]="getParameter(parameter.name)"
            (ngModelChange)="updateParameter(parameter.name, $event)"
        />
      }
      @case (eXpertParameterTypeEnum.STRING) {
        <input
            class="w-full px-3 text-sm leading-9 text-text-primary border-0 rounded-lg grow h-9 bg-background-default-subtle focus:outline-none focus:ring-1 focus:ring-inset"
            [placeholder]="(parameter.description || parameter.title || parameter.name) + (parameter.optional ? '(' + ('PAC.KEY_WORDS.Optional' | translate: {Default: 'Optional'}) + ')' : '')"
            type="text"
            [attr.maxlength]="parameter.maximum ?? null"
            [disabled]="readonly()"
            [ngModel]="getParameter(parameter.name)"
            (ngModelChange)="updateParameter(parameter.name, $event)"
        />
      }
      @case (eXpertParameterTypeEnum.NUMBER) {
        <input
            class="w-full px-3 text-sm leading-9 text-text-primary border-0 rounded-lg grow h-9 bg-background-default-subtle focus:outline-none focus:ring-1 focus:ring-inset"
            [placeholder]="(parameter.description || parameter.title || parameter.name) + (parameter.optional ? '(' + ('PAC.KEY_WORDS.Optional' | translate: {Default: 'Optional'}) + ')' : '')"
            type="number"
            [disabled]="readonly()"
            [ngModel]="getParameter(parameter.name)"
            (ngModelChange)="updateParameter(parameter.name, $event)"
        />
      }
      @case (eXpertParameterTypeEnum.PARAGRAPH) {
        <textarea
          class="w-full px-3 text-sm leading-9 text-text-primary border-0 rounded-lg grow h-[120px] bg-background-default-subtle focus:outline-none focus:ring-1 focus:ring-inset"
          [disabled]="readonly()"
          [placeholder]="(parameter.description || parameter.title || parameter.name) + (parameter.optional ? '(' + ('PAC.KEY_WORDS.Optional' | translate: {Default: 'Optional'}) + ')' : '')"
          [attr.maxlength]="parameter.maximum ?? null"
          [ngModel]="getParameter(parameter.name)"
          (ngModelChange)="updateParameter(parameter.name, $event)"
        ></textarea>
      }

          @case (eXpertParameterTypeEnum.SELECT) {
            <ngm-select class="flex-1"
              placeholder=""
              [readonly]="readonly()"
              [nullable]="parameter.optional"
              [selectOptions]="parameter.selectOptions"
              [ngModel]="getParameter(parameter.name)"
              (ngModelChange)="updateParameter(parameter.name, $event)"
            ></ngm-select>
          }
        }
      </div>
    }
  </div>
}