<div class="!mb-4 !w-full" data-multiselect="{{configProperty}}">
  <label
    ng-show="labelText"
    class="!block !mb-2 !font-medium !text-[#333E48] !text-sm"
    >{{labelText}}<span ng-show="fieldRequired" class="!text-red-500">
      *</span
    ></label
  >
  <!-- Info text about the folders -->
  <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>
  <div class="!relative" ng-style="{'width': width || '100%'}">
    <!-- Input field display with search functionality -->
    <div
      class="!w-full !bg-white !border !rounded-md !py-2 !px-3 !text-left !text-zinc-900 !leading-tight !min-h-[42px] focus:!outline-none focus:!shadow-outline !cursor-pointer !flex !items-center !relative"
      ng-class="{'!ring-1 !ring-gray-400 !border-gray-400': isSearchFocused || isDropdownOpen}"
      ng-mousedown="$event.preventDefault()"
    >
      <!-- Search input -->
      <input
        type="text"
        id="{{configProperty}}-search-input"
        ng-model="searchFilter"
        ng-focus="handleSearchInputFocus(); $event.stopPropagation();"
        ng-blur="handleSearchInputBlur()"
        ng-change="handleSearchInputChange()"
        placeholder="{{placeholder || 'Search and select options...'}}"
        class="!text-sm !flex-grow !bg-transparent !text-zinc-900 !leading-tight !outline-none !border-0 !appearance-none !shadow-none"
        autocomplete="off"
        style="-webkit-appearance: none; -moz-appearance: none"
        ng-class="{'!opacity-0': selectedItems.length > 0 && !isSearchFocused && !searchFilter}"
        ng-mousedown="$event.stopPropagation()"
      />

      <!-- Selection count display (overlays the input when not searching) -->
      <div
        ng-show="selectedItems.length > 0 && !isSearchFocused && !searchFilter"
        class="!absolute !left-3 !top-1/2 !transform !-translate-y-1/2 !text-sm !text-zinc-900 !pointer-events-none"
      >
        {{selectedItems.length}} option{{selectedItems.length > 1 ? 's' : ''}}
        selected
      </div>

      <!-- Wrapper for icons on the right -->
      <div class="!flex !items-center !space-x-1">
        <!-- Clear search button -->
        <button
          ng-show="searchFilter"
          type="button"
          class="!flex !items-center !p-1 !text-gray-500 hover:!text-gray-700 !rounded-full hover:!bg-gray-100"
          ng-click="clearSearchFilter(); $event.stopPropagation();"
        >
          <i class="dku-icon-dismiss-16"></i>
        </button>

        <!-- Dropdown arrow -->
        <div
          class="!flex !items-center !px-1 !text-zinc-900 !cursor-pointer"
          ng-click="toggleDropdown($event); $event.stopPropagation();"
        >
          <i
            class="dku-icon-chevron-down-16"
            ng-class="{'!hidden': isDropdownOpen}"
          ></i>
          <i
            class="dku-icon-chevron-up-16"
            ng-class="{'!hidden': !isDropdownOpen}"
          ></i>
        </div>
      </div>
    </div>

    <!-- Dropdown Menu -->
    <div
      class="!absolute !z-10 !w-full !mt-1 !bg-white !border !rounded-md !shadow-lg !max-h-96 !overflow-y-auto"
      ng-show="isDropdownOpen"
      ng-mouseenter="isDropdownHovered = true"
      ng-mouseleave="isDropdownHovered = false"
    >
      <div class="!py-1" ng-click="$event.stopPropagation()">
        <div
          ng-repeat="(type, foldersOfType) in foldersByType"
          ng-show="typeHasMatchingFolders(type)"
          class="!mb-2"
        >
          <div
            class="!px-4 !py-1 !text-xs !font-semibold !text-gray-500 !bg-gray-100"
          >
            {{ type || 'General' }}
          </div>
          <div
            ng-repeat="folder in foldersOfType | filter:folderFilterFn"
            class="!px-4 !py-2 hover:!bg-gray-100 !cursor-pointer !flex !items-center"
            ng-class="{'!bg-gray-50': isItemSelected(folder)}"
            ng-click="$event.stopPropagation();toggleItemSelection(folder)"
          >
            <div class="!flex !items-center !w-full">
              <div class="!relative !inline-flex !items-center">
                <input
                  type="checkbox"
                  class="!form-checkbox !h-4 !w-4 !text-zinc-900 !rounded !accent-black"
                  ng-checked="isItemSelected(folder)"
                  ng-click="$event.stopPropagation();toggleItemSelection(folder)"
                />
              </div>
              <span class="!ml-2">{{ folder.label }}</span>
            </div>
          </div>
        </div>

        <!-- No results message -->
        <div
          class="!px-4 !py-2 !text-center !text-gray-500"
          ng-show="searchFilter && filterActive && (folders | filter:folderFilterFn).length === 0"
        >
          No options matching "{{ searchFilter }}"
        </div>
        <div
          class="!px-4 !py-2 !text-center !text-gray-500"
          ng-show="!searchFilter && folders.length === 0"
        >
          No options available.
        </div>
      </div>
    </div>
  </div>

  <!-- Selected Items Display (Below the input field) -->
  <div ng-show="selectedItems.length > 0" class="!mt-2 !relative">
    <div
      class="!absolute !-z-10 !opacity-0 !pointer-events-none"
      style="width: 100%"
    >
      <div
        id="{{configProperty}}-items-container"
        class="selected-items-container !pr-12"
      >
        <div
          ng-repeat="item in selectedItems"
          class="!inline-flex !items-center !bg-black !text-gray-200 !text-sm !mr-2 !mb-2 !rounded !py-1 !px-2.5 !gap-x-2.5"
        >
          <span class="!leading-none !pb-[0.5px]">{{item.label}}</span>
          <button
            type="button"
            class="!text-gray-300 hover:!text-gray-100 !leading-none !py-[0.5px]"
          >
            <i class="dku-icon-dismiss-12"></i>
          </button>
        </div>
      </div>
    </div>

    <!-- WRAPPER FOR ITEMS ONLY (excludes view more button) -->
    <div class="!relative">
      <!--  Items that are always visible (the first N items  that fit) -->
      <div class="selected-items-container !pr-12">
        <div
          ng-repeat="item in selectedItems | limitTo: (exceedsMaxHeight ? visibleItemCount : selectedItems.length)"
          class="!inline-flex !items-center !bg-black !text-gray-200 !text-sm !mr-2 !mb-2 !rounded !py-1 !px-2.5 !gap-x-2.5"
        >
          <span class="!leading-none !pb-[0.5px]">{{item.label}}</span>
          <button
            type="button"
            class="!text-gray-300 hover:!text-gray-100 !leading-none !py-[0.5px]"
            ng-click="removeItem(item, $event)"
          >
            <i class="dku-icon-dismiss-12"></i>
          </button>
        </div>
      </div>

      <!--  The remaining items, shown only when expanded. -->
      <div
        ng-show="exceedsMaxHeight && showAllItems"
        class="selected-items-container !pr-12"
      >
        <div
          ng-repeat="item in selectedItems | limitTo: -remainingItemCount"
          class="!inline-flex !items-center !bg-black !text-gray-200 !text-sm !mr-2 !mb-2 !rounded !py-1 !px-2.5 !gap-x-2.5"
        >
          <span class="!leading-none !pb-[0.5px]">{{item.label}}</span>
          <button
            type="button"
            class="!text-gray-300 hover:!text-gray-100 !leading-none !py-[0.5px]"
            ng-click="removeItem(item, $event)"
          >
            <i class="dku-icon-dismiss-12"></i>
          </button>
        </div>
      </div>

      <!-- Single continuous dismiss bar spanning all selected items -->
      <div
        ng-show="selectedItems.length > 1"
        class="!absolute !right-0 !top-0 !bottom-0 !border-l !border-black !pl-3 !flex !items-center !justify-center !cursor-pointer"
        ng-click="clearAllItems()"
      >
        <button type="button" class="!text-zinc-900">
          <i class="dku-icon-dismiss-16"></i>
        </button>
      </div>
    </div>

    <!--  "View More" button. Appears if items are hidden and not expanded. -->
    <div
      ng-show="exceedsMaxHeight && !showAllItems"
      class="!inline-flex !items-center !text-zinc-900 !px-3 !py-1.5 !text-sm !mr-2 !mb-2 !cursor-pointer"
      ng-click="toggleShowAll()"
    >
      <span>View {{remainingItemCount}} more</span>
      <i class="!ml-1 dku-icon-chevron-down-12"></i>
    </div>

    <!--  "Show Less" button. Appears if items are hidden and expanded. -->
    <div
      ng-show="exceedsMaxHeight && showAllItems"
      class="!inline-flex !items-center !text-zinc-900 !px-3 !py-1.5 !text-sm !mr-2 !mb-2 !cursor-pointer"
      ng-click="toggleShowAll()"
    >
      <span>Show less</span>
      <i class="!ml-1 dku-icon-chevron-up-12"></i>
    </div>
  </div>
</div>
