<!-- selector-template.html -->
<div class="!mb-4"> <!-- Removed !w-full, parent container should manage width -->
    <label  ng-if="labelText" class="!block !mb-2 !font-light">{{labelText}}<span class="!text-red-500"></span></label> <!-- Changed to font-light -->

    <!-- Outer container for the 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': isChoiceFocused || isDropDown ,
'!border-red-500 !ring-1 !ring-red-500': formName.$submitted && isRequired && !config[configProperty]}"
         tabindex="-1">

        <!-- Main Input Field -->
        <input type="text"
            ng-model="choiceFilter"
            ng-focus="openDropdown($event); isChoiceFocused=true"
            ng-blur="handleInputBlur(); isChoiceFocused=false"
            ng-change="handleInputChange()"
            ng-required="isRequired"
            ng-attr-placeholder="{{ emptySelectorMessage || 'Please select an option' }}"
            class="!flex-grow !bg-transparent !text-gray-700 !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">
            <!-- Clear button for the input -->
            <button ng-if="choiceFilter"
                class="!flex !items-center !p-1 !text-gray-500 hover:!text-gray-700 !rounded-full hover:!bg-gray-100"
                ng-click="clearSelection(); $event.stopPropagation();">
                <i class="dku-icon-dismiss-16 "></i>
            </button>

            <!-- Dropdown arrow -->
            <div class="!flex !items-center !p-1 !text-gray-700 !cursor-pointer"
                 ng-click="openDropdown($event); $event.stopPropagation();">
                <i class="dku-icon-chevron-down-16"></i>
            </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 !top-full !left-0"
            ng-if="isDropDown">

            <!-- Flat choices list -->
            <div class="!py-1" ng-click="$event.stopPropagation();">
                <div ng-repeat="choice in choices | filter:choiceFilterFn"
                    class="!px-4 !py-2 hover:!bg-gray-100 !cursor-pointer"
                    ng-class="{'!bg-blue-50 !text-blue-700': selectedChoice && selectedChoice.value === choice.value}"
                    ng-click="selectChoice(choice); $event.stopPropagation();"> <!-- Added stopPropagation -->
                    {{ choice.label }}
                </div>

                <!-- No results message -->
                <div class="!px-4 !py-2 !text-center !text-gray-500"
                    ng-if="choiceFilter && (choices | filter:choiceFilterFn).length === 0">
                    No choices matching "{{ choiceFilter }}"
                </div>
                <div class="!px-4 !py-2 !text-center !text-gray-500"
                    ng-if="!choiceFilter && choices.length === 0">
                    No saved configurations found.
                </div>
            </div>
        </div>
    </div>
    <div class="!text-red-500 !text-sm !mt-1"
        ng-show="formName.$submitted && isRequired && !config[configProperty]">
    {{ empty-selector-message || 'Please select an option' }}
    </div>

    <div class="!p-4 !border !rounded-md !bg-gray-50 !mt-2" ng-if="description">
        <div class="!flex !items-start">
            <i class="dku-icon-warning-outline-16   !pr-2 !text-gray-400 !cursor-move"></i>
            <div>
                <p class="!text-sm !text-gray-600"> {{ description }}</p>
            </div>
        </div>
    </div>
</div>