<!-- bs-connection-selector-template.html -->
<div class="!mb-4">
    <!-- Label for connection selection -->
    <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>


    <input type="hidden"
           name="{{fieldName || configProperty}}"
           ng-model="config[configProperty]"
           ng-required="fieldRequired"/>

    <!-- Connection Selector -->
    <div class="!mb-5">
        <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': isConnectionFocused || isConnectionDropdownOpen,
                '!border-red-500 !ring-1 !ring-red-500': formName.$submitted && fieldRequired && !config[configProperty]}"
             }
        "
        tabindex="-1">
        <input type="text"
               ng-model="connectionFilter"
               ng-focus="handleInputFocus(); isConnectionFocused=true; $event.stopPropagation();"
               ng-blur="handleConnectionInputBlur(); isConnectionFocused=false"
               ng-change="handleConnectionInputChange()"
               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;"/>
        <div class="!flex !items-center !space-x-1">
            <button ng-show="connectionFilter"
                    type="button"
                    class="!flex !items-center !p-1 !text-gray-500 hover:!text-gray-700 !rounded-full hover:!bg-gray-100"
                    ng-click="clearConnectionSelection(); $event.stopPropagation();">
                <i class="dku-icon-dismiss-16 "></i>
            </button>
            <div class="!flex !items-center !p-1 !text-zinc-900 !cursor-pointer"
                 ng-click="openConnectionDropdown(false); $event.stopPropagation();">
                <i class="dku-icon-chevron-down-16"
                   ng-class="{'!hidden': isConnectionDropdownOpen}"></i>
                <i class="dku-icon-chevron-up-16"
                   ng-class="{'!hidden': !isConnectionDropdownOpen}"></i></div>
        </div>
        <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="isConnectionDropdownOpen"
             ng-mouseenter="isDropdownHovered = true"
             ng-mouseleave="isDropdownHovered = false">
            <div class="!py-1" ng-click="$event.stopPropagation()">
                <!-- Loop through connection types -->
                <div ng-repeat="(type, connectionsInType) in connectionsByType"
                     ng-show="typeHasMatchingConnections(type)" class="!mb-2">
                    <!-- Type header -->
                    <div class="!px-4 !py-1 !text-sm !font-semibold !text-gray-500 !bg-gray-100">{{ type }}</div>
                    <!-- Connections of this type -->
                    <div ng-repeat="connection in connectionsInType"
                         ng-show="connectionMatchesFilter(connection)"
                         class="!px-4 !py-2 hover:!bg-gray-100 !cursor-pointer !text-sm !flex !justify-between !items-center"
                         ng-class="{'!bg-zinc-100': selectedConnectionObj && selectedConnectionObj.id === connection.id && (!isDropdownHovered || connection.isHovered)}"
                         ng-click="selectConnection(connection); $event.stopPropagation();"
                         ng-mouseenter="connection.isHovered = true"
                         ng-mouseleave="connection.isHovered = false">
                        <span>{{ connection.connectionDisplayName }}</span>
                        <i class="dku-icon-checkmark-16"
                           ng-show="selectedConnectionObj && selectedConnectionObj.id === connection.id"></i>
                    </div>
                </div>
                <!-- No results message -->
                <div class="!px-4 !text-sm !py-2 !text-center !text-gray-500"
                     ng-show="connectionFilter && !hasMatchingConnections()">
                    No connections matching "{{ connectionFilter }}"
                </div>
                <div class="!px-4 !text-sm !py-2 !text-center !text-gray-500"
                     ng-show="!connectionFilter && connections.length === 0">
                    No connections available.
                </div>
            </div>
        </div>
    </div>
    <!-- Validation message -->
    <div class="!text-red-500 !text-sm !mt-1"
         ng-show="formName.$submitted && fieldRequired && !config[configProperty]">
        Please select a connection
    </div>
</div>


<!-- Info text -->
<div ng-show="infoText" class="!p-3 !border !rounded-md !bg-gray-50 !mb-2">
    <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">{{infoText}}</p>
        </div>
    </div>
</div>
</div>