@if (paramFormControl && paramInfo?.schema) {
  @if (arrayValue) {
    <div cdkDropList (cdkDropListDropped)="dropItem($event)" [cdkDropListData]="arrayValue">
      @for (item of arrayValue; track $index; let i = $index) {
        <div cdkDrag class="flex my-2 mr-2 items-center">
          <label for="item-{{ i }}" class="text-white mr-1 hover:cursor-move" cdkDragHandle
            >{{ i }}:</label
          >
          <!-- @if (paramInfo?.schema.items.type === 'object') {
            <app-params-form
              [paramsSchema]="paramInfo?.schema.items"
              [data]="item"
              (updated)="updateItem(i, $event)"
            ></app-params-form>
          } -->
          @if (paramInfo?.schema.items.type !== 'object') {
            <!-- TODO(jwetzell): add input validation using info from schema -->
            <input
              id="item-{{ i }}"
              class="pl-1 border-2 border-gray-200 border-solid rounded-sm text-white"
              [(ngModel)]="arrayValue[i]"
              [placeholder]="paramInfo?.placeholder"
              [ngModelOptions]="{ standalone: true }"
              (input)="valueUpdated()"
            />
          }
          @if (i >= minItems) {
            <div
              class="flex items-center justify-center hover:cursor-pointer bg-red-400 rounded-sm ml-1"
              matTooltip="Remove"
            >
              <mat-icon (click)="deleteItem(i)">remove</mat-icon>
            </div>
          }
        </div>
      }
    </div>
  }
  @if (!arrayIsMaxed()) {
    <div
      class="w-full bg-gray-400 flex items-center justify-center rounded-sm hover:cursor-pointer hover:bg-gray-300"
      (click)="addItem()"
      matTooltip="Add Item"
    >
      <mat-icon class="scale-100">add</mat-icon>
    </div>
  }
}