<template name="courseMembers">
	<div class="course-page-component-header">
		<h4>
			<span class="fa fa-users fa-fw" aria-hidden="true"></span>
			{{#mf KEY='course.dtails.paticipants.title' NUM=howManyEnrolled}}
				{NUM, plural,
					=0 {No participants yet}
					one {1 Participant}
					other {# Participants}
				}
			{{/mf}}
			{{#if canNotifyAll}}
				<i class="fa fa-envelope contact-members" id="contactMembers"></i>
			{{/if}}
		</h4>
	</div>
	{{#if members}}
		<div class="course-members">
			{{#if ownUserMember}}
				{{#with ownUserMember}}
                	{{> courseMember member=this course=.. isOwnUserMember=true}}
				{{/with}}
            {{/if}}
			{{#each sortedMembers}}
				{{> courseMember member=this course=..}}
			{{/each}}
			{{#if limited}}
				<button
					class="btn btn-add course-page-btn js-show-all-members"
					type="button">
					<i class="fa fa-plus fa-fw" aria-hidden="true"></i>
					{{#mf KEY='course.members.showMoreParticipants'}}
						Show more participants
					{{/mf}}
				</button>
			{{/if}}
		</div>
	{{/if}}
</template>

<template name="courseMember">
	<div class="course-member {{ownUserMemberClass}}">
		{{> profilelink member.user}}
		{{#if memberRoles.length}}
			<ul class='course-member-roles'>
				{{#each memberRoles}}
					<li class='{{this}} course-member-role'>
						<span class="course-member-role-text">
							<span class="{{rolelistIcon this}} fa-fw" aria-hidden="true"></span>
							<span class="role-short">{{mf roleShort}}</span>
						</span>
						{{#with ..}}
							{{#if mayUnsubscribeFromTeam ..}}
								{{> removeFromTeamDropdown}}
							{{/if}}
						{{/with}}
					</li>
				{{/each}}
			</ul>
		{{/if}}
		{{#if maySubscribe}}
			<button type="button" class="btn btn-add js-add-to-team-btn"
				data-tooltip="{{mf 'course.roles.maketeam' 'Add to team'}}"
				data-tooltip-direction="e">
				<span class="fa fa-plus add-to-team-btn-plus {{member.user}}"></span>
				<span class="glyphicon glyphicon-bullhorn fa-fw" aria-hidden="true"></span>
			</button>
		{{/if}}
		{{#if showMemberComment}}
			<div class="course-member-comment">
				<div class="course-member-comment-arrow"></div>
				<div class="course-member-comment-body">
					{{#if editableMessage}}
						{{> editable editableMessage}}
					{{else}}
						{{member.comment}}
					{{/if}}
				</div>
			</div>
		{{/if}}
	</div>
</template>

<template name="removeFromTeamDropdown">
	<span class="dropdown">
		<button type="button" class="btn btn-remove remove-team-btn dropdown-toggle"
			aria-expanded="false"
			aria-haspopup="true"
			data-toggle="dropdown"
			data-tooltip="{{mf 'course.roles.removeTeam' 'Remove from team'}}"
			data-tooltip-direction="e">
			<span class="fa fa-remove fa-fw" aria-hidden="true"></span>
		</button>
		<ul class="dropdown-menu dialog-dropdown right">
			<li class="dropdown-header">
				{{#if isNotPriviledgedSelf}}
					{{mf 'course.details.removeTeam.self.header' 'Remove yourself from team'}}
				{{else}}
					{{mf 'course.details.removeTeam.others.header' 'Remove member from team'}}
				{{/if}}
				<button class="close">&times;</button>
			</li>
			<li role="separator" class="divider"></li>
			<li class="dialog-dropdown-text">
				{{#if isNotPriviledgedSelf}}
					{{mf 'course.detail.remove.yourself.team' 'Remove yourself from the team? Only another member can add you back.'}}
				{{else}}
					{{mf 'course.detail.remove.other.team' 'Do you really want to remove this member from the team?'}}
				{{/if}}
			</li>
			<li class="dialog-dropdown-btn">
				<button type="button" class="btn btn-remove js-remove-team">
					<span class="fa fa-remove"></span>
					{{mf 'course.group.remove' 'Remove'}}
				</button>
			</li>
		</ul>
	</span>
</template>
