<div class="bootstrap-wrapper wt-webpart-projectspace-roles">
	<div class="pull-right" ng-if="CanEditRoles">
		<i title="{{'Edit' | translate}}" class="glyphicon glyphicon-pencil wt-icon" ng-click="editRoles()"></i>
		<span title="{{'Edit' | translate}}" class="wt-linkText ng-binding" ng-click="editRoles()">{{'Edit' | translate}}</span>
	</div>
	<div class="form-group" ng-repeat="role in UserRoles | filter:filterRoles">
		<h3 class="control-label">{{role.roleName}}</h3>
		<div class="wizdom-user" ng-repeat="principal in role.principals | orderBy:'displayName'">
			<div ng-if="principal.type == 'user' || principal.type == 1">
				<div class="imgColumn">

					<div wizdom365-presence-picture=""
						 size="AVATAR"
						 accountname="principal.loginName"
						 email="principal.email"
						 name="principal.displayName"
						 image="principal.pictureURL"></div>
				</div>

				<div class="textColumn">
					<div class="name">
						<a ng-href="{{principal.publicUrl}}">
							{{principal.displayName}}
						</a>
					</div>
                    <section>
                        <div class="email" ng-show="principal.email.length"><a ng-href="mailto:{{principal.email}}">{{principal.email}}</a></div>
                        <div class="phone" ng-show="principal.phone.length">
                            <a ng-href="tel:{{principal.phone}}">
                                {{principal.phone}}
                            </a>
                        </div>
                    </section>
				</div>
			</div>
			<div ng-if="principal.type == 'group' || principal.type == 2">
				<div class="imgColumn">

					<div>
						<div class="ms-table ms-core-tableNoSpace">
							<div class="ms-tableRow">
								<div class="ms-tableCell ms-verticalAlignTop">
									<div class="ms-peopleux-userImgDiv">
										<span class="ms-imnSpan">
											<span class="ms-spimn-presenceLink">
												<span class=" ms-hide"><img class=" ms-hide" name="imnempty" src="/_layouts/15/images/spimn.png?rev=23" alt=""></span>
											</span>
											<span class="ms-peopleux-imgUserLink">
												<div class="avatar-frame">
													<img ng-src="{{groupImage}}" alt="">
												</div>
											</span>
										</span>
									</div>
								</div>
							</div>
						</div>
					</div>

				</div>
				<div class="textColumn">
					<div class="name">{{principal.displayName}}</div>
				</div>
			</div>
		</div>
	</div>

</div>
