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

        <div class="actions">
            <a ng-click="$hide()" ng-show="!newTask.loading">
                {{'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>{{'INVOLVE-PEOPLE.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.userSourceType" ng-class="{'active' : (!popupModel.userSourceType || popupModel.userSourceType == 'search')}">{{'INVOLVE-PEOPLE.SOURCE.SEARCH-OPTION' | translate}}</button>
                  </div>
                  <div class="btn-group">
                    <button type="button" class="btn btn-default" ng-click="setFormFieldType()" ng-model="popupModel.userSourceType" ng-class="{'active' : popupModel.userSourceType == 'field'}">{{'INVOLVE-PEOPLE.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.userSourceType || popupModel.userSourceType == 'search')">
            <div class="form-group">
                <input class="form-control" type="text" id="people-select-input" placeholder="{{ 'INVOLVE-PEOPLE.SEARCH-PLACEHOLDER' | translate }}" auto-focus
                       custom-keys up-pressed="previousUser()" down-pressed="nextUser()" enter-pressed="confirmUser()"
                       delayed-model="popupModel.filter" delay="200"/>
                <div class="subtle" translate="GENERAL.MESSAGE.SELECT-PEOPLE-HELP" style="padding: 5px 0 0 1px;"></div>
            </div>
            <h4>
                <!--<span translate="GENERAL.TITLE.RECENT-PEOPLE" ng-show="popupModel.showRecentResults"></span>-->
                <span translate="GENERAL.TITLE.MATCHING-PEOPLE" ng-if="!popupModel.showRecentResults"></span>
            </h4>
            <div class="people-select">
                <div class="no-results" ng-show="popupModel.userResults.length == 0">
                    <span>{{'INVOLVE-PEOPLE.NO-MATCHING-RESULTS' | translate}}</span>
                </div>
                <ul class="simple-list selectable pack" ng-show="popupModel.userResults.length > 0" scroll-to-active scroll-to-active-model="popupModel.selectedUser.id">
                    <li ng-click="confirmUser(user);" ng-repeat="user in popupModel.userResults"
                        ng-class="{'active': user.id === popupModel.selectedUser.id}">
                        <i class="icon icon-user"></i><span user-name="user"></span>
                    </li>
                </ul>
            </div>
        </div>
        
        <div ng-show="popupModel.userSourceType == '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.userFieldFilter"
                       select-title="'FORM-BUILDER.MESSAGE.READONLY-TEXT-INSERT-FIELD'" fields="popupModel.formFields" selected-field="popupModel.userField" ignore-selection="true"></div>
            </div>
        </div>
        
    </div>

</div>