<!-- List of feedback choices -->
<div>
  <label
    ng-show="labelText"
    class="!block !mb-1 !font-medium !text-[#333E48] !text-sm"
  >
    {{labelText}}
    <span ng-show="fieldRequired" class="!text-red-500">*</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>
  <!-- Hidden input for form validation -->
  <input
    type="hidden"
    name="{{configProperty}}"
    ng-model="arrayValidationModel"
    ng-required="fieldRequired"
    ng-value="isArrayEmpty() ? '' : 'valid'"
  />

  <div
    class="feedback-choices-container !space-y-3"
    dnd-sortable="config[configProperty]"
    dnd-sortable-item-selector=".feedback-item"
    ng-class="{'!border !border-red-500 !rounded-md !p-2': formName[configProperty].$invalid && (formName[configProperty].$touched || formName.$submitted)}"
  >
    <div
      ng-repeat="item in config[configProperty] track by $index"
      class="feedback-item !flex !items-center !relative"
      ng-attr-data-index="{{$index}}"
    >
      <!-- Grab handle with proper cursor states -->
      <div
        class="flex items-center cursor-grab active:cursor-grabbing hover:text-gray-600 transition-colors duration-200"
      >
        <i class="dku-icon-dots-multiple-16"></i>
      </div>

      <!-- The actual input field with its white background and border -->
      <div
        class="!flex !items-center !bg-white !rounded-lg !border !border-gray-200 focus-within:!border-blue-500 !transition-colors !duration-200"
        ng-class="width ? '!w-[' + width + ']' : '!flex-grow'"
      >
        <!-- This flex container makes the input fill the space within the input-specific div -->
        <div class="!px-1 !w-full">
          <div
            contenteditable
            ng-model="config[configProperty][$index]"
            style="
              white-space: normal;
              overflow: visible;
              text-overflow: clip;
              min-height: 40px;
            "
            class="!w-full !bg-transparent !border-none !outline-none !py-2 !px-2 !text-sm !text-zinc-900 placeholder:!text-gray-400 !ring-0"
          ></div>
        </div>
      </div>

      <!-- Delete button - Positioned to the far right -->
      <div class="!flex !items-center !py-3 !pr-3 !pl-2 !ml-auto">
        <button
          type="button"
          class="!text-zinc-900 hover:!text-red-600 focus:!outline-none"
          ng-click="removeItem($index)"
        >
          <i class="dku-icon-trash-16 !h-5 !w-5"></i>
        </button>
      </div>
    </div>
  </div>

  <!-- Validation error message -->
  <div
    class="!text-red-500 !text-sm !mt-1"
    ng-show="formName.$submitted && fieldRequired && isArrayEmpty()"
  >
    {{validationMessage || 'Please add at least one element'}}
  </div>

  <!-- Add feedback button -->
  <div class="!mt-2">
    <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="addItem()"
    >
      <i class="dku-icon-plus-16 !h-5 !w-5 !mr-1.5 !text-[#181818]"></i>
      <span>{{ labelButton || 'Add an element' }}</span>
    </button>
  </div>
</div>
