<div class="!mb-5">
  <!-- Main Label -->
  <label
    ng-show="fieldConfig.label"
    class="!block !text-[#333E48] !text-sm !font-medium !mb-1"
  >
    {{fieldConfig.label}}<span
      class="!text-red-500"
      ng-show="fieldConfig.mandatory"
      >*</span
    >
  </label>

  <div
    ng-show="description"
    class="!flex !flex-col !items-start !gap-1 !self-stretch !p-2 !px-3 !rounded-lg border border-[#1B4E7A] !bg-white !mb-2"
  >
    <div class="!flex !items-start !gap-2">
      <i class="dku-icon-info-circle-outline-16 !text-[#1B4E7A] !text-sm"></i>
      <span class="!text-[#1B4E7A] !text-sm !font-normal !leading-5">
        {{ description }}
      </span>
    </div>
  </div>

  <!-- Description -->
  <p
    class="!text-sm !text-gray-500 !mt-1 !mb-2"
    ng-show="fieldConfig.description"
  >
    {{ fieldConfig.description }}
  </p>

  <!-- List -->
  <div class="!w-full !space-y-3">
    <!-- Variant A: ONLY when headerParam is present -->
    <div
      ng-if="headerParam"
      ng-repeat="item in config[configProperty] track by $index"
      class="ea-ol-card !mb-3 !relative !overflow-visible !bg-zinc-50"
      id="{{rowAnchorId($index)}}"
    >
      <!-- Header is clickable -->
      <div
        class="ea-ol-header ea-ol-header--clickable !mb-2 !rounded !pt-2 !pl-2.5 !gap-x-2.5 !bg-zinc-50 !border-b-0 !items-center"
        ng-click="toggleRow($index)"
        role="button"
        tabindex="0"
      >
        <div class="!flex !items-center !gap-2">
          <div class="ea-ol-title !whitespace-normal !break-words">
            {{ getHeaderLabel(item) || ('#' + ($index + 1)) }}
          </div>
          <div ng-click="$event.stopPropagation()">
            <button
              type="button"
              class="btn btn-link !text-[#18181B] translate-y-[1px]"
              ng-click="removeModel($index); $event.stopPropagation()"
              title="Remove"
            >
              <i class="dku-icon-trash-16"></i>
            </button>
          </div>
        </div>
        <div class="ea-ol-actions" ng-click="$event.stopPropagation()">
          <button
            ng-if="collapsible"
            type="button"
            class="!px-[4px] !py-[2px]"
            ng-click="toggleRow($index); $event.stopPropagation()"
            title="Collapse/expand"
          >
            <i
              class="dku-icon-chevron-down-16"
              ng-show="isRowCollapsed($index)"
            ></i>
            <i
              class="dku-icon-chevron-up-16"
              ng-show="!isRowCollapsed($index)"
            ></i>
          </button>
        </div>
      </div>
      <div
        class="ea-ol-body !bg-zinc-50"
        ng-class="{'ea-ol-body--collapsed': collapsible && isRowCollapsed($index)}"
      >
        <div class="!flex !w-full !items-start !gap-3 !pr-3">
          <div class="!flex-grow">
            <div class="!flex !flex-col !gap-0">
              <div
                ng-repeat="param in fieldConfig.subParams"
                class="field-container"
              >
                <!-- Separator -->
                <div ng-if="param.type === 'SEPARATOR'">
                  <h4
                    class="!text-lg !font-medium !text-gray-900"
                    ng-if="param.label"
                  >
                    {{ param.label }}
                  </h4>
                </div>

                <!-- SELECT (respect hideHeaderField) -->
                <div
                  ng-if="param.type === 'SELECT' && isFieldVisible(param, item) && !(headerParam && hideHeaderField && param.name === headerParam)"
                  ng-class="getCollapsableContentDivs(param, item)"
                >
                  <bs-select
                    config="item"
                    custom-margin="mb-0"
                    form-name="formName"
                    config-property="{{ param.name }}"
                    label-text="{{ param.label }}"
                    field-required="param.mandatory"
                    get-choices-from-python="{{ param.getChoicesFromPython }}"
                    root-model="rootModel || config"
                    trigger-parameter="triggerParametersArray"
                    description="{{ param.description }}"
                  >
                  </bs-select>
                </div>

                <!-- BOOLEAN -->
                <div
                  ng-if="param.type === 'BOOLEAN' && isFieldVisible(param, item)"
                  ng-class="getCollapsableContentDivs(param, item)"
                >
                  <bs-toggle-switch
                    config="item"
                    config-property="{{ param.name }}"
                    label-text="{{ param.label }}"
                    description-text="{{ param.description }}"
                  >
                  </bs-toggle-switch>
                </div>

                <!-- TEXTAREA -->
                <div
                  ng-if="param.type === 'TEXTAREA' && isFieldVisible(param, item)"
                  ng-class="getCollapsableContentDivs(param, item)"
                >
                  <bs-textarea
                    custom-margin="mb-0"
                    config="item"
                    form-name="formName"
                    config-property="{{ param.name }}"
                    label-text="{{ param.label }}"
                    field-required="param.mandatory"
                    initial-width="100%"
                    initial-height="120px"
                    trigger-parameter="triggerParametersArray"
                    description="{{ param.description }}"
                    placeholder="{{ param.placeholder }}"
                  >
                  </bs-textarea>
                </div>

                <!-- MULTISELECT -->
                <div
                  ng-if="param.type === 'MULTISELECT' && isFieldVisible(param, item)"
                  ng-class="getCollapsableContentDivs(param, item)"
                >
                  <bs-multiselect
                    config="item"
                    form-name="formName"
                    config-property="{{ param.name }}"
                    label-text="{{ param.label }}"
                    trigger-parameter="triggerParametersArray"
                    description="{{ param.description }}"
                    placeholder="{{ param.placeholder }}"
                  >
                  </bs-multiselect>
                </div>

                <!-- STRING -->
                <div
                  ng-if="param.type === 'STRING' && isFieldVisible(param, item)"
                  ng-class="getCollapsableContentDivs(param, item)"
                >
                  <label
                    class="!font-medium !text-[#333E48] !text-sm"
                    ng-show="param.label"
                  >
                    {{param.label}}<span
                      ng-show="param.mandatory"
                      class="text-red-500"
                      >*</span
                    >
                  </label>
                  <div
                    ng-show="param.description"
                    class="!flex !flex-col !items-start !gap-1 !self-stretch !p-2 !px-3 !rounded-lg border border-[#1B4E7A] !bg-white !mb-2"
                  >
                    <div class="!flex !items-start !gap-2">
                      <i
                        class="dku-icon-info-circle-outline-16 !text-[#1B4E7A] !text-sm"
                      ></i>
                      <span
                        class="!text-[#1B4E7A] !text-sm !font-normal !leading-5"
                      >
                        {{ param.description }}
                      </span>
                    </div>
                  </div>
                  <input
                    type="text"
                    class="!text-sm !appearance-none !w-full !border !rounded-md !py-2 !px-3 !text-zinc-900 !font-normal !leading-tight focus:!border-gray-400 focus:!ring-1 focus:!ring-gray-400"
                    ng-model="item[param.name]"
                    ng-required="param.mandatory"
                    style="min-height: 42px"
                    placeholder="{{ param.placeholder || null }}"
                    ng-class="{
                      '!border-red-500 !ring-1 !ring-red-500': formName.$submitted && param.mandatory && !item[param.name],
                          'focus:!border-red-500 focus:!ring-1 focus:!ring-red-500':
                    !item[param.name] && param.mandatory,
                        'focus:!border-gray-400 focus:!ring-1 focus:!ring-gray-400':
                    !!configitem[param.name]
                }"
                  />
                </div>

                <!-- LLM -->
                <div
                  ng-if="param.type === 'LLM' && isFieldVisible(param, item)"
                  ng-class="getCollapsableContentDivs(param, item)"
                >
                  <bs-llm-select
                    config="item"
                    form-name="formName"
                    config-property="{{ param.name }}"
                    label-text=""
                    field-required="param.mandatory"
                    purpose="{{ param.llmUsagePurpose}}"
                    description="{{ param.description }}"
                  >
                  </bs-llm-select>
                </div>

                <div
                  ng-if="param.type === 'ARRAY' && isFieldVisible(param, item)"
                  ng-class="getCollapsableContentDivs(param, item)"
                >
                  <bs-array
                    config="item"
                    config-property="{{ param.name }}"
                    field-required="param.mandatory"
                    form-name="formName"
                    label-text="{{ param.label }}"
                    description="{{ param.description }}"
                  >
                  </bs-array>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Variant B: Default rendering  -->
    <div
      ng-if="!headerParam"
      ng-repeat="item in config[configProperty] track by $index"
      class="!mb-3 !relative !overflow-visible "
      ng-class="{'!border  !rounded-lg !bg-zinc-50': headerLabel, '!bg-white !pr-4 !pt-2': !headerLabel}"
    >
      <!-- Header (only if headerLabel exists) -->
      <div
        ng-if="headerLabel"
        class="!flex !items-center !justify-between !mb-2 !rounded-t-lg !pt-2 !pb-2 !pl-2.5 !pr-2.5 !gap-x-2.5 !bg-zinc-50 !border-b-0 rounded-md"
        ng-class="{'!cursor-pointer': collapsible}"
        ng-click="collapsible && toggleRow($index)"
        role="button"
        tabindex="0"
      >
        <div class="!flex !items-center !gap-2">
          <div
            class="!text-sm !font-medium !leading-5 !text-[#18181B] !whitespace-normal !break-words"
          >
            {{ headerLabel }} {{ $index + 1 }}
          </div>
          <div ng-click="$event.stopPropagation()">
            <button
              type="button"
              class=" !text-[#18181B] !translate-y-[1px] !p-0 !min-w-0"
              ng-click="removeModel($index); $event.stopPropagation()"
              title="Remove"
            >
              <i class="dku-icon-trash-16"></i>
            </button>
          </div>
        </div>
        <div
          class="!flex !items-center !gap-1"
          ng-if="collapsible"
          ng-click="$event.stopPropagation()"
        >
          <button
            type="button"
            class=" !text-[#18181B] !p-1 !min-w-0 !translate-y-[4px]"
            ng-click="toggleRow($index); $event.stopPropagation()"
            title="Collapse/expand"
          >
            <i
              class="dku-icon-chevron-down-16 !text-sm !leading-5"
              ng-show="isRowCollapsed($index)"
            ></i>
            <i
              class="dku-icon-chevron-up-16 !text-sm  !leading-5"
              ng-show="!isRowCollapsed($index)"
            ></i>
          </button>
        </div>
      </div>

      <!-- Delete button (only when no headerLabel) -->
      <button
        ng-if="!headerLabel"
        type="button"
        class="!absolute !top-2 !right-2 !text-zinc-900 hover:!text-red-600 focus:!outline-none !p-2 !rounded-md hover:!bg-red-50 !transition-colors !flex-shrink-0"
        ng-click="removeModel($index)"
        title="Remove item"
      >
        <i class="dku-icon-trash-16 !h-5 !w-5"></i>
      </button>

      <!-- Body -->
      <div
        class="!pb-3"
        ng-class="{'!bg-zinc-50': headerLabel, '!hidden': collapsible && isRowCollapsed($index)}"
      >
        <div
          class="!flex !w-full !items-start !gap-3"
          ng-class="{'!pr-3 !pl-3': headerLabel, '!pr-10': !headerLabel}"
        >
          <div class="!flex-grow">
            <div class="!flex !flex-col !gap-0">
              <div
                ng-repeat="param in fieldConfig.subParams"
                class="field-container"
              >
                <div ng-if="param.type === 'SEPARATOR'">
                  <h4
                    class="!text-lg !font-medium !text-gray-900"
                    ng-if="param.label"
                  >
                    {{ param.label }}
                  </h4>
                </div>

                <div
                  ng-if="param.type === 'SELECT' && isFieldVisible(param, item)"
                  ng-class="getCollapsableContentDivs(param, item)"
                >
                  <bs-select
                    config="item"
                    custom-margin="mb-0"
                    form-name="formName"
                    config-property="{{ param.name }}"
                    label-text="{{ param.label }}"
                    field-required="param.mandatory"
                    get-choices-from-python="{{ param.getChoicesFromPython }}"
                    root-model="rootModel || config"
                    trigger-parameter="triggerParametersArray"
                    description="{{ param.description }}"
                  >
                  </bs-select>
                </div>

                <div
                  ng-if="param.type === 'BOOLEAN' && isFieldVisible(param, item)"
                  ng-class="getCollapsableContentDivs(param, item)"
                >
                  <bs-toggle-switch
                    config="item"
                    config-property="{{ param.name }}"
                    label-text="{{ param.label }}"
                    description-text="{{ param.description }}"
                  >
                  </bs-toggle-switch>
                </div>

                <div
                  ng-if="param.type === 'TEXTAREA' && isFieldVisible(param, item)"
                  ng-class="getCollapsableContentDivs(param, item)"
                >
                  <bs-textarea
                    custom-margin="mb-0"
                    config="item"
                    form-name="formName"
                    config-property="{{ param.name }}"
                    label-text="{{ param.label }}"
                    field-required="param.mandatory"
                    initial-width="100%"
                    initial-height="120px"
                    trigger-parameter="triggerParametersArray"
                    description="{{ param.description }}"
                    placeholder="{{ param.placeholder }}"
                  >
                  </bs-textarea>
                </div>

                <div
                  ng-if="param.type === 'STRING' && isFieldVisible(param, item)"
                  class="!mb-2"
                  ng-class="getCollapsableContentDivs(param, item)"
                >
                  <label
                    class="!font-medium !text-[#333E48] !text-sm"
                    ng-show="param.label"
                  >
                    {{param.label}}<span
                      ng-show="param.mandatory"
                      class="!text-red-500"
                      >*</span
                    >
                  </label>
                  <div
                    ng-show="param.description"
                    class="!flex !flex-col !items-start !gap-1 !self-stretch !p-2 !px-3 !rounded-lg !border !border-[#1B4E7A] !bg-white !mb-2"
                  >
                    <div class="!flex !items-start !gap-2">
                      <i
                        class="dku-icon-info-circle-outline-16 !text-[#1B4E7A] !text-sm"
                      ></i>
                      <span
                        class="!text-[#1B4E7A] !text-sm !font-normal !leading-5"
                      >
                        {{ param.description }}
                      </span>
                    </div>
                  </div>
                  <input
                    type="text"
                    class="!text-sm !appearance-none !w-full !border !rounded-md !py-2 !px-3 !text-zinc-900 !font-normal !leading-tight focus:!border-gray-400 focus:!ring-1 focus:!ring-gray-400"
                    ng-model="item[param.name]"
                    ng-required="param.mandatory"
                    style="min-height: 42px"
                    placeholder="{{ param.placeholder || null }}"
                    ng-class="{
                          '!border-red-500 !ring-1 !ring-red-500': formName.$submitted && param.mandatory && !item[param.name],
                          'focus:!border-red-500 focus:!ring-1 focus:!ring-red-500': !item[param.name] && param.mandatory,
                          'focus:!border-gray-400 focus:!ring-1 focus:!ring-gray-400': !!item[param.name]
                      }"
                  />
                </div>

                <div
                  ng-if="param.type === 'LLM' && isFieldVisible(param, item)"
                  ng-class="getCollapsableContentDivs(param, item)"
                >
                  <bs-llm-select
                    config="item"
                    form-name="formName"
                    config-property="{{ param.name }}"
                    label-text=""
                    field-required="param.mandatory"
                    purpose="{{ param.llmUsagePurpose}}"
                    description="{{ param.description }}"
                  >
                  </bs-llm-select>
                </div>

                <div
                  ng-if="param.type === 'MULTISELECT' && isFieldVisible(param, item)"
                  ng-class="getCollapsableContentDivs(param, item)"
                >
                  <bs-multiselect
                    config="item"
                    form-name="formName"
                    config-property="{{ param.name }}"
                    label-text="{{ param.label }}"
                    trigger-parameter="triggerParametersArray"
                    description="{{ param.description }}"
                    root-model="rootModel || config"
                  >
                  </bs-multiselect>
                </div>

                <div
                  ng-if="param.type === 'ARRAY' && isFieldVisible(param, item)"
                  ng-class="getCollapsableContentDivs(param, item)"
                >
                  <bs-array
                    config="item"
                    config-property="{{ param.name }}"
                    field-required="param.mandatory"
                    form-name="formName"
                    label-text="{{ param.label }}"
                    description="{{ param.description }}"
                  >
                  </bs-array>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Add -->
  <div class="!mt-4">
    <button
      type="button"
      class="!inline-flex !items-center !px-3 !py-2 !bg-white !border !border-gray-300 !text-zinc-900 !text-sm !rounded-md !shadow-sm hover:!bg-gray-50 focus-visible:!outline focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-indigo-600"
      ng-click="addModel()"
    >
      <i class="dku-icon-plus-16 !h-5 !w-5 !mr-1.5 !text-[#181818]"></i>
      Add {{ buttonLabel}}
    </button>
  </div>

  <!-- Validation -->
  <div
    class="!text-red-500 !text-sm !mt-2"
    ng-show="formName.$submitted && hasValidationErrors()"
  >
    {{ getValidationMessage() }}
  </div>
</div>
