<div class="popover" click-anywhere="$hide()" ignore-class="group-selection" auto-scroll>
    <div class="arrow"></div>
    <div class="popover-header">
        <span class="title">{{title && title || '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" ng-if="popupModel.formFields">
            <div class="col-xs-4">
                <label>{{'GENERAL.MESSAGE.GROUP-SOURCE-TYPE' | translate}}</label>
            </div>
            <div class="col-xs-8">
                <div class="btn-group btn-group-justified">
                  <div class="btn-group">
                    <button type="button" class="btn btn-default" ng-click="setSearchType()" ng-model="popupModel.groupSourceType" ng-class="{'active' : (!popupModel.groupSourceType || popupModel.groupSourceType == 'search')}">{{'GENERAL.MESSAGE.GROUP-SOURCE-SEARCH-OPTION' | translate}}</button>
                  </div>
                  <div class="btn-group">
                    <button type="button" class="btn btn-default" ng-click="setFormFieldType()" ng-model="popupModel.groupSourceType" ng-class="{'active' : popupModel.groupSourceType == 'field'}">{{'GENERAL.MESSAGE.GROUP-SOURCE-FIELD-OPTION' | translate}}</button>
                  </div>
                </div>
            </div>
        </div>
        
        <div ng-if="popupModel.formFields" class="col-xs-12" style="margin-bottom:10px" />

        <div ng-show="(!popupModel.groupSourceType || popupModel.groupSourceType == 'search')">
            <div class="subtitle" translate="GENERAL.TITLE.FILTER">
            </div>
            <div class="form-group">
                <input class="form-control" type="text" id="people-select-input" placeholder="Search group" auto-focus custom-keys
                       up-pressed="previousGroup()" down-pressed="nextGroup()" enter-pressed="confirmGroup()" delayed-model="popupModel.filter" delay="200"/>
                <div class="inline-help" translate="GENERAL.MESSAGE.SELECT-GROUP-HELP"></div>
            </div>
            <div class="subtitle">
                <span translate="GENERAL.TITLE.MATCHING-GROUPS"></span>
            </div>
            <div class="people-select">
                <ul class="simple-list">
                    <li ng-click="confirmGroup(group);" ng-repeat="group in popupModel.groupResults" ng-class="{'active': group.id === popupModel.selectedGroup.id}">
                        {{group.name}}
                    </li>
                </ul>
                <div class="nothing-to-see" translate="GENERAL.MESSAGE.GROUP-NO-MATCHING-RESULTS" ng-show="popupModel.groupResults.length == 0"></div>
            </div>
        </div>
        
        <div ng-show="popupModel.groupSourceType == 'field'" class="form-group clearfix">
            <div class="col-xs-4">
                <label>{{'PROCESS-BUILDER.PUBLISH-STEP.SOURCE.FORM-FIELD' | translate}}:</label>
            </div>
            <div class="col-xs-8">
                <div id="userFormField" variables-select include-type="false" expand-relative="true" field-type-filter="popupModel.groupFieldFilter"
                       select-title="'FORM-BUILDER.MESSAGE.READONLY-TEXT-INSERT-FIELD'" fields="popupModel.formFields" selected-field="popupModel.groupField" ignore-selection="true"></div>
            </div>
        </div>
    </div>
</div>