<div class="inventory-dropdown inventory-attributes-dropdown dropdown">
<a ng-class="{'disabled': readonly}" href="javascript:void(0)" data-toggle="dropdown" class="btn dropdown-toggle"
   onclick="setTimeout(() => {this.closest('div').querySelector('input.searchFilter').focus()}, 100)">
    <span ng-show="!filter.label && filter.type !== 'class'" class="disabled">Select attribute</span>
    <span ng-show="filter.type !== 'class' && filter.label" class="filter-label"><span class="filterType">inventory:</span> {{filter.label}}</span>
    <span class="filter-label" ng-show="filter.type === 'class'"><span class="filterType">class:</span> {{filter.value}}</span>
    <i class="bi bi-chevron-down"></i>
</a>

    <ul class="dropdown-menu dropdown_reports">
        <input type="text"
               class="searchFilter"
               ng-click="$event.stopPropagation();"
               ng-init="data.searchFilter=''"
               ng-model="data.searchFilter"
               placeholder="Search..."
        />
        <li class="top-group" ng-if="includeClasses">
            Inventory
        </li>
        <li class="addColumn" ng-repeat="(key,value) in ui.InventoryItems.groups">
            <ul class="unstyled" ng-show="value">
                <b ng-show="(value  | filterObject:data.searchFilter:'label' | objectLength ) > 0">{{value[0].category}}</b>
                <li ng-repeat="item in filteredCols = (value  | filterObject:data.searchFilter:'label')">
                    <a ng-click="$event.stopPropagation();addFilter(item, place); runReport()" onclick="$(this).closest('.open').removeClass('open');">{{ item.label }}</a>
                </li>
            </ul>
        </li>
        <li class="top-group" ng-if="includeClasses">
            Classes
        </li>
        <li ng-if="includeClasses" class="addColumn">
            <ul class="unstyled">
                <li ng-repeat="class in data.classes track by $index">
                    <a ng-click="$event.stopPropagation();addFilter({type: 'class', value: class}, place); runReport()" onclick="$(this).closest('.open').removeClass('open');">{{ class }}</a>
                </li>
                <li ng-if="!searchExactMatch && searchIsValidClass">
                    <a ng-click="$event.stopPropagation();addFilter({type: 'class', value: data.searchFilter}, place); runReport()"
                       onclick="$(this).closest('.open').removeClass('open');"
                    >
                        Add class "{{ data.searchFilter }}" (not found yet)
                    </a>
                </li>
                <li class="search_item">
                    <a ng-click="$event.stopPropagation();addFilter(inventoryFilterService.filterFromSearchQuery(data.searchFilter), place); runReport()"
                       onclick="$(this).closest('.open').removeClass('open');"
                    >
                       <i class="bi bi-search margin-right-small"></i> Host search for "{{ data.searchFilter }}"
                    </a>
                </li>
            </ul>
        </li>
    </ul>
</div>
