<div class="popover" click-anywhere="$hide()" ignore-class="toggle-functional-group-select">
    <div class="arrow"></div>
    <div class="popover-header">
        <span class="title">{{title && (title | translate) || ('GENERAL.TITLE.SELECT-GROUP' | translate)}}</span>

        <div class="actions">
            <a ng-click="$hide()">{{'GENERAL.ACTION.CLOSE' | translate}}</a>
        </div>
    </div>

    <div class="popover-wrapper">
    
        <div class="form-group">
            <input class="form-control" type="text" id="people-select-input" placeholder="{{ 'GENERAL.MESSAGE.SELECT-GROUP-SEARCH-PLACEHOLDER' | translate }}" auto-focus
                   custom-keys up-pressed="previousGroup()" down-pressed="nextGroup()" enter-pressed="confirmGroup()"
                   delayed-model="popupModel.filter" delay="200"/>
        </div>
        <h4>
            <span translate="GENERAL.TITLE.MATCHING-GROUPS"></span>
        </h4>
        <div class="people-select">
            <div class="no-results" ng-show="popupModel.groupResults.length == 0">
                <span>{{'GENERAL.MESSAGE.SELECT-GROUP-NO-MATCHING-RESULTS' | translate}}</span>
            </div>
            <ul class="simple-list selectable pack" ng-show="popupModel.groupResults.length > 0" scroll-to-active scroll-to-active-model="popupModel.selectedGroup.id">
                <li ng-click="confirmGroup(group);" ng-repeat="group in popupModel.groupResults"
                    ng-class="{'active': group.id === popupModel.selectedGroup.id}">
                    <span>{{group.name}}</span>
                </li>
            </ul>
        </div>
        
    </div>
</div>