<!-- bs-select-template.html -->
<div ng-class="customMargin ? ('!' + customMargin) : '!mb-5'">

    <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 class="!text-red-500 !text-sm !mb-1" ng-show="folderCreationError">
        {{ folderCreationError }}
    </div>

    <!-- Info text about the folder -->
    <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>

    

    <!-- Outer container for the folder input field and its elements -->
    <div class="!relative !flex !h-10 !py-2 !px-3 !justify-between !items-center !self-stretch !bg-white !border !rounded-md"
         ng-class="{'!ring-1 !ring-gray-400 !border-gray-400': isFolderFocused || isFolderDropdownOpen ,
'!border-red-500 !ring-1 !ring-red-500':  formName.$submitted && fieldRequired && !config[configProperty]}"
         tabindex="-1">

        <!-- Main Input Field for Folder -->
        <input type="text"
               ng-model="folderFilter"
               ng-focus="handleInputFocus(); isFolderFocused=true; $event.stopPropagation();"
               ng-blur="handleFolderInputBlur(); isFolderFocused=false"
               ng-change="handleFolderInputChange()"
               ng-required="fieldRequired"
               placeholder="{{placeholder || null}}"
               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;"
        />

        <!-- Wrapper for icons (clear button and dropdown arrow) on the right -->
        <div class="!flex !items-center !space-x-1">
            
            <!-- Dropdown arrow -->
            <div class="!flex !items-center !p-1 !text-zinc-900 !cursor-pointer"
                 ng-click="openFolderDropdown(false); $event.stopPropagation();">
                <i class="dku-icon-chevron-down-16"
                   ng-class="{'!hidden': isFolderDropdownOpen }"></i>
                <i class="dku-icon-chevron-up-16"
                   ng-class="{'!hidden': !isFolderDropdownOpen}"></i>
            </div>
        </div>

        <!-- Dropdown Menu for Folders -->
        <div class="!absolute !z-10 !w-full !mt-1 !bg-white !border !rounded-md !shadow-lg !max-h-96 !overflow-y-auto !top-full !left-0"
             ng-show="isFolderDropdownOpen"
             ng-mouseenter="isDropdownHovered = true"
             ng-mouseleave="isDropdownHovered = false">


            <!-- Flat folders list -->
            <div class="!py-1" ng-click="$event.stopPropagation();">
                <!-- Folders -->
                <div ng-repeat="folder in folders | filter:folderFilterFn"
                     class="!px-4 !py-2 hover:!bg-gray-100 !cursor-pointer !flex !justify-between !items-center"
                     ng-class="{'!bg-zinc-100': selectedFolder && selectedFolder.value === folder.value && (!isDropdownHovered || folderHoverStates[folder.value])}"
                     ng-click="selectFolder(folder); $event.stopPropagation();"
                     ng-mouseenter="folderHoverStates[folder.value] = true"
                     ng-mouseleave="folderHoverStates[folder.value] = false">
                    <span>{{ folder.label }}</span>
                    <i class="dku-icon-circle-fill-12"
                       ng-show="selectedFolder && selectedFolder.value === folder.value"></i>
                </div>


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


        </div>
    </div>
    <div class="!text-red-500 !text-sm !mt-1"
         ng-show="formName.$submitted && fieldRequired && !config[configProperty]">
        {{validationMessage || 'Please select a folder'}}
    </div>


</div>