<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 | translate}}</label> <div wizdom365-spinner="" loading="working(role.id)"></div>
        <div wizdom365-principalpicker principals="role.principals" 
             allowmultiple="{{role.allowMultiple}}" 
             mode="{{role.allowedPrincipalTypes}}" 
             domain="{{role.allowedPrincipalDomains}}" 
             alloweveryone="true" 
             allowwizdomgroups="{{role.internalName != 'W365CM_Participants' && role.internalName != 'W365CM_WaitingList'}}"
             add-fn="addPrincipal(principal, role.id)" 
             remove-fn="removePrincipal(principal, role.id)">
        </div>
    </div>
</div>
<div class="modal-footer">
    <button ng-disabled="disableBtns" ng-click="close()" class="btn btn-default wiz-btn-padding">{{'Close' | translate}}</button>    
</div>