<div class="bootstrap-wrapper w365cm wt-webpart-roles">

	<div class="row">
		<div class="col-xs-12 add-bottom-padding">
			<div class="pull-right" ng-if="CanEditRoles">
				<span class="glyphicon glyphicon-pencil" ng-click="editRoles();"></span>
				<span class="wt-linkText hidden-xs" ng-click="editRoles();">{{'Edit' | translate}}</span>
			</div>
		</div>
	</div>


	<div class="form-group wt-role">
		<div class="rolesHeading">{{participants.roleName | translate}}</div>
		<div class="wizdom-user" ng-repeat="principal in participants.principals | orderBy:'displayName' | limitTo:showMaxPerRole">
			<!-- User -->
			<div ng-if="principal.type == 'user'">
				<div class="imgColumn">
					<div wizdom365-presence-picture="" size="AVATAR" accountname="principal.accountName" name="principal.displayName" image="principal.pictureURL"></div>
				</div>
				<div class="textColumn">
					<div class="participantName"><a ng-href="{{principal.publicUrl}}">{{principal.displayName}}</a></div>
					<section>
						<div class="participantEmail" ng-show="principal.email.length"><a ng-href="mailto:{{principal.email}}">{{principal.email}}</a></div>
						<div class="participantPhone" ng-show="principal.phone.length">{{principal.phone}}</div>
					</section>
				</div>
			</div>

			<!-- Group -->
			<div ng-if="principal.type == 'group'">
				<div class="participantGroupName">{{principal.displayName}}</div>
			</div>

		</div>
		<div class="noParticipants" ng-hide="participants.principals || !participants">
			{{'There are currently no participants enrolled in this course' | translate}}
		</div>
		<div class="bottom">
			<span ng-show="participants.principals && participants.principals.length>0">
				<a ng-click="showAll(participants)" class="btn btn-primary view-btn" role="button">{{'Show all' | translate}}</a>
			</span>
		</div>

	</div>

</div>
