<?xml version="1.0" encoding="UTF-8" ?>
<templates xml:space="preserve">
    <t t-name="cetmix_tower_server.AutocompletePopup" owl="1">
        <div
            class="ace-autocomplete-popup"
            t-ref="popupRef"
            tabindex="0"
            role="combobox"
            t-att-aria-label="props.type === 'secrets' ? 'Secret search' : 'Variable search'"
            aria-expanded="true"
            aria-haspopup="listbox"
            t-att-aria-owns="props.type === 'secrets' ? 'secrets-list' : 'variables-list'"
        >
            <!-- Close button for mobile convenience -->
            <button
                class="ace-autocomplete-close-btn"
                t-on-click="onCloseClick"
                type="button"
                title="Close"
                t-att-aria-label="props.type === 'secrets' ? 'Close secret search' : 'Close variable search'"
            >
                ×
            </button>
            <!-- Search input field -->
            <div class="ace-autocomplete-search">
                <input
                    type="text"
                    class="ace-autocomplete-search-input"
                    t-att-placeholder="props.type === 'secrets' ? 'Search secrets...' : 'Search variables...'"
                    t-model="state.searchTerm"
                    t-ref="searchInput"
                    t-on-input="onSearchInput"
                    t-on-keydown="onSearchKeyDown"
                    t-on-focus="onSearchFocus"
                    t-on-blur="onSearchBlur"
                    t-att-aria-label="props.type === 'secrets' ? 'Search secrets' : 'Search variables'"
                    t-att-aria-controls="props.type === 'secrets' ? 'secrets-list' : 'variables-list'"
                    aria-autocomplete="list"
                    t-att-aria-activedescendant="`${props.type === 'secrets' ? 'sec' : 'var'}-opt-${props.selectedIndex}`"
                />
            </div>
            <!-- Items list -->
            <div
                class="ace-autocomplete-items"
                t-ref="itemsContainer"
                t-att-id="props.type === 'secrets' ? 'secrets-list' : 'variables-list'"
                role="listbox"
            >
                <div
                    t-foreach="filteredCommands"
                    t-as="command"
                    t-key="command.name"
                    t-att-id="`${props.type === 'secrets' ? 'sec' : 'var'}-opt-${command_index}`"
                    t-att-class="getItemClass(command_index)"
                    t-on-click="() => this.onItemClick(command)"
                    role="option"
                    t-att-aria-selected="command_index === props.selectedIndex ? 'true' : 'false'"
                >
                    <span class="command-name" t-esc="command.name" />
                    <span
                        class="command-description"
                        t-esc="props.type === 'secrets' ? `${command.reference}` : `{{ ${command.reference} }}`"
                    />
                </div>
                <div
                    t-if="!filteredCommands.length"
                    class="ace-autocomplete-no-results"
                >
                    <t t-if="props.type === 'secrets'">No secrets found</t>
                    <t t-else="">No variables found</t>
                </div>
            </div>
        </div>
    </t>
</templates>
