<div class="form-group principal-picker">
    <input type="text" ng-class="{'ng-invalid':(required && (principals==null || principals==undefined || principals.length==0))}"
           ng-model="asyncSelected"
           placeholder="{{placeholder}}"
           typeahead-on-select="addPrincipal($item, $model, $label);"
           typeahead="principal as (principal.category?'('+principal.category+') ':'')+ principal.displayName + (principal.loginName? ' - ' + principal.loginName : '') for principal in searchForPrincipal($viewValue)"
           typeahead-loading="loadingLocations"
           typeahead-template-url="customTemplate.html"
           class="form-control"
           typeahead-min-length="2"
           autocomplete="off"
           ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } }" />

    <i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>

    <ul class="list-group principal-picker-selected-list">
        <li class="list-group-item" ng-class="{'alert alert-danger':principal.error}" ng-repeat="principal in principals">
            <span ng-if="principal.loginName == 'Everybody'">
                {{principal.displayName | translate}}
            </span>
            <span ng-if="principal.loginName != 'Everybody'">
                {{principal.category?"("+principal.category+") ":""}}{{principal.displayName}}
            </span>
            <span ng-show="principal.loginName && (principal.groupId == null || principal.groupId.length == 0)">&lt;{{principal.loginName}}&gt;</span>
            <button type="button" class="close" ng-click="removePrincipal(principal)"><span aria-hidden="true">&times;</span></button>
        </li>
    </ul>

    <script type="text/ng-template" id="customTemplate.html">
        <div class="typeahead-group-header" style="padding-left:20px" ng-if='match.model.resultSetLimitedTo'>{{'Top' | translate}} {{match.model.resultSetLimitedTo}} {{'results' | translate}}:</div>
        <a>
            <span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
        </a>
    </script>
</div>