<div class="modal-header">
    <button type="button" class="close closebtn" data-ng-click="close()" aria-hidden="true">&times;</button>
    <h1 class="modal-title">{{"Participants" | translate}}</h1>
</div>
<div class="modal-body">
    <div class="form-group" ng-repeat="role in siteRoles | filter:filterRoles">
        <label class="control-label">{{ role.roleName }}</label>
        <div wizdom365-principalpicker principals="role.principals" 
             allowmultiple="{{role.allowMultiple}}" 
             mode="{{role.allowedPrincipalTypes}}" 
             domain="{{role.allowedPrincipalDomains}}"
             alloweveryone="true"
             allow-external-and-internal="true"
             add-fn="addPrincipal(principal, role.id)" 
             remove-fn="removePrincipal(principal, role.id, position)"></div>
    </div>
</div>
<div class="modal-footer">
    <button ng-disabled="working" ng-click="close()" class="btn btn-default wiz-btn-padding">{{'Close' | translate}}</button>    
</div>