
<template name="courseDetailsPage">
	<div class="container">
		<div class="course-page-column-left">
			{{#if edit}}
				<div class="page-component">
					{{> courseEdit course}}
				</div>
			{{else}}
				<div class="page-component">
					<div class="course-details {{#with course}}{{coursestate}}{{/with}}">
						<div class="details-header">
							<div class="details-header-tags">
								{{#if isProposal}}
									<div class="proposal-tag">
										<span class="fa fa-lightbulb-o fa-fw" aria-hidden="true"></span>
										{{mf 'course.details.is-proposalTag' 'Proposal'}}
									</div>
								{{/if}}
								{{#with course}}
									{{> regionTag}}
								{{/with}}
							</div>
							<div class="course-details-title">
								{{#if mayEdit}}
									{{> editable editableName}}
								{{else}}
									<h2>{{course.name}}</h2>
								{{/if}}
							</div>
							{{#with course}}
								{{#if categories}}
									<div class="course-details-categories">
										{{> courseCategories}}
									</div>
								{{/if}}
								{{> courseGroupList}}
							{{/with}}
						</div>
						{{> courseDetailsSubmenu editableDescription=editableDescription course=course}}
					</div>
					{{> sharing}}
					{{#if mayEdit}}
						{{#with course}}
							<div class="actions">
								{{> buttonEdit event="js-course-edit"}}
								{{#unless expanded}}
									{{> buttonDelete event="js-expand"}}
								{{/unless}}
							</div>
						{{/with}}
					{{/if}}
					{{#if expanded}}
						{{> confirmDialog}}
					{{/if}}
					{{> courseRoles roles_details}}
				</div>
			{{/if}}
			{{#if mobileViewport}}
				{{> courseEvents}}
			{{else}}
				{{> discussion courseId=course._id select=select}}
			{{/if}}
		</div>
		<div class="course-page-column-right">
			{{#unless mobileViewport}}
				{{> courseEvents}}
			{{/unless}}
			<div class="page-component">
				{{> courseMembers course}}
			</div>
			{{#if mobileViewport}}
				{{> discussion courseId=course._id select=select}}
			{{/if}}
			<div class="page-component">
				{{> report}}
			</div>
		</div>
	</div>
</template>

<template name="confirmDialog">
	<div class="course-delete-confirmation">
		<p>{{mf 'course.reallydelete' 'Please confirm that you would like to delete this course. This cannot be undone.'}}</p>
		<div class="form-actions">
			{{> buttonDeleteConfirm
				event="js-delete-course-confirm"
				textIdle=(mf 'course.delete.confirm.button' 'Delete this course and its events.')
				textBusy=(mf 'course.delete.confirm.button.busy' 'Deleting course...')
			}}
			{{> buttonCancel event="js-collapse"}}
		</div>
	</div>
</template>


<template name="courseDetailsSubmenu">
	<nav class="course-details-nav">
		<ul class="nav nav-tabs">
			<li role="presentation" class='active'>
				<a href="#description" data-toggle="tab">
					<span class="fa fa-file-text fa-fw" aria-hidden="true"></span>
					<span class="tab-label">{{mf 'course.subnav.descr' 'Description'}}</span>
				</a>
			</li>
			<li role="presentation">
				<a href="#history" data-toggle="tab">
					<span class="fa fa-history fa-fw" aria-hidden="true"></span>
					<span class="tab-label">{{mf 'course.subnav.history' 'History'}}</span>
				</a>
			</li>
		</ul>
	</nav>
	<div class="tab-content course-details-content">
		<div class="tab-pane active" id="description">
			{{> courseDetailsDescription editableDescription=editableDescription course=course}}
		</div>
		<div class="tab-pane course-history" id="history">
			{{> coursehistory}}
		</div>
		{{> pricePolicy dismissable=true wrap='course-details-price-policy'}}
	</div>
</template>

<template name="courseDetailsDescription">
	<p class="course-details-description">
		{{#if mayEdit}}
			{{>editable editableDescription}}
		{{else}}
			{{{course.description}}}
		{{/if}}
	</p>
</template>


<template name="courseGroupList">
	<div class="tag-group multiline">
		{{#each groups}}
			{{> groupName}}
			{{#if isOrganizer}}
				<div class="tag group-tag addon">
					<span class="glyphicon glyphicon-bullhorn fa-fw" aria-hidden="true"></span>
				</div>
			{{/if}}
			{{#if tools}}
				<div class="btn-group tag-btn group-tag-btn addon">
					<button type="button" class="dropdown-toggle"
						aria-expanded="false"
						aria-haspopup="true"
						data-toggle="dropdown">
						<span class="fa fa-caret-down fa-fw" aria-hidden="true"></span>
					</button>
					<ul class="dropdown-menu dialog-dropdown">
						<li class="dropdown-header">
							{{mf 'grouplist.editgroup.header' 'Edit group'}}
							<button class="close">&times;</button>
						</li>
						<li role="seperator" class="divider"></li>
						{{#each tools}}
							<li class="dialog-dropdown-btn">{{> toolTemplate}}</li>
						{{/each}}
					</ul>
				</div>
			{{/if}}
		{{/each}}

		{{> courseGroupAdd}}
	</div>
</template>


<template name="courseGroupAdd">
	{{#if groupsToAdd}}
		<div class="btn-group tag-btn group-tag-btn">
			<button type="button" class="dropdown-toggle"
				aria-expanded="false"
				aria-haspopup="true"
				data-toggle="dropdown">
				<span class="fa fa-plus fa-fw" aria-hidden="true"></span>
				<span>{{mf 'course.group.addText' 'link a group'}}</span>
				<span class="fa fa-caret-down fa-fw" aria-hidden="true"></span>
			</button>
			<ul class="dropdown-menu dialog-dropdown">
				<li class="dropdown-header">
					{{mf 'grouplist.addgroups.header' 'Add group'}}
					<button class="close">&times;</button>
				</li>
				<li role="seperator" class="divider"></li>
				{{#each groupsToAdd}}
					<li>
						<button
							class="btn-link js-add-group"
							type="button"
							value="{{this}}">
							{{name}}
						</button>
					</li>
				{{/each}}
				<li class="dialog-dropdown-btn">
					<a href="/group/create" class="btn btn-add">
						<span class="fa fa-plus fa-fw" aria-hidden="true"></span>
						{{mf 'profile.createNewGroup.button'}}
					</a>
				</li>
			</ul>
		</div>
	{{/if}}
</template>


<template name="courseGroupRemove">
	{{#if expanded}}
		<div class="group-tool-dialog danger">
			{{#with groupId}}
				{{mf 'course.group.confirmRemoveText' 'Stop listing group "{NAME}" as promoters?' NAME=name}}
			{{/with}}
			<button type="button" class="btn btn-danger js-remove">
				{{mf 'course.group.confirmRemoveButton' "Delist"}}
			</button>
		</div>
	{{else}}
		<a href="#" class="js-expand btn btn-remove">
			<span class="glyphicon glyphicon-remove fa-fw" aria-hidden="true"></span>
			{{mf 'course.group.remove' 'Remove'}}
		</a>
	{{/if}}
</template>


<template name="courseGroupMakeOrganizer">
	{{#if expanded}}
		<div class="group-tool-dialog add">
			{{#with groupId}}
				{{mf 'course.group.confirmOrgText' 'Add group "{NAME}" as editors?' NAME=name}}
			{{/with}}
			{{mf 'course.group.confirmOrgNotes' "All members of the group will be able to edit the course and can create new events for it."}}
			<button type="button" class="btn btn-add js-makeOrganizer">
				{{mf 'course.group.confimOrgButton' "Give editing rights"}}
			</button>
		</div>
	{{else}}
		<a href="#" class="js-expand btn btn-add">
			<span class="glyphicon glyphicon-bullhorn fa-fw" aria-hidden="true"></span>
			{{mf 'course.group.addOrgText' "Give editing rights"}}
		</a>
	{{/if}}
</template>

<template name="courseGroupRemoveOrganizer">
	{{#if expanded}}
		<div class="group-tool-dialog danger">
			{{#with groupId}}
				{{mf 'course.group.confirmRemoveOrgText' 'Take away all editing rights from group "{NAME}"?' NAME=name}}
			{{/with}}
			<button type="button" class="btn btn-danger js-removeOrganizer">
				{{mf 'course.group.confimRemoveOrgButton' "Take away editing rights"}}
			</button>
		</div>
	{{else}}
		<a href="#" class="js-expand btn btn-remove">
			<span class="glyphicon glyphicon-remove fa-fw" aria-hidden="true"></span>
			{{mf 'course.group.removeOrgText' "Remove editing rights"}}
		</a>
	{{/if}}
</template>
