<div class="margin-left inventory-dropdown inventory-attributes-dropdown dropdown">
    <a rel="tooltip" data-title="Use an existing group instead of defining a new filter." ng-if="!selectGroupData.name" href="javascript:void(0)" data-toggle="dropdown"
       class="btn btn-secondary no-border dropdown-toggle">
         Use group
    </a>
    <a ng-if="selectGroupData.name" href="javascript:void(0)" data-toggle="dropdown"
       class="btn btn-primary no-border dropdown-toggle">
        Group: {{ selectGroupData.name }} <i class="bi bi-chevron-down margin-left-small"></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 ng-repeat="category in [{name: 'My', type: 'personal'},{name: 'Shared', type: 'shared'}]" class="addColumn margin-bottom-small">
            <ul class="unstyled">
                <b class="capitalize">{{ category.name }} groups</b>
                <li ng-repeat="item in groups[category.type] | filterObject:data.searchFilter:'name'">
                    <a ng-click="$event.stopPropagation();selectGroup(item);"
                       class="no-border"
                       onclick="$(this).closest('.open').removeClass('open');">{{ item.name }}</a>
                </li>
                <li ng-if="(groups[category.type] | filterObject:data.searchFilter:'name' | objectLength) == 0">
                    <span class="muted no-border">No groups found</span>
                </li>
            </ul>
        </li>
    </ul>
</div>
