<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="container-fluid">
			<div class="row">
				<div class="roles-alignment" ng-repeat="principal in role.principals | orderBy:'displayName'">
					<div class="wizdom-user">

						<div class="position" 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="name">
								<a ng-href="{{principal.publicUrl}}">
									{{principal.displayName}}
								</a>
							</div>
                            <section class="properties">
                                <div class="email" ng-hide="false" ng-show="principal.email.length"><a ng-href="mailto:{{principal.email}}">{{'Send e-mail' | translate}}</a></div>
                                <div class="phone" ng-show="principal.phone.length">
                                    <a ng-href="tel:{{principal.phone}}">
                                        {{principal.phone}}
                                    </a>
                                </div>
                            </section>

						</div>

						<div class="position" ng-if="principal.type == 'group' || principal.type == 2">

							<div class="imgColumn">

								<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 class="textColumn">
								<div class="name">{{principal.displayName}}</div>
							</div>
						</div>

					</div>
				</div>

			</div>
		</div>



	</div>
</div>
