<template name="discussion">
	<div class="page-component discussion" id="discussion">
		<div class="course-page-component-header">
			<h4>
				<span class="fa fa-comments fa-fw" aria-hidden="true"></span>
				{{mf 'course.title.Discussion' 'Discussion'}}
			</h4>
		</div>
		{{#if ready}}
			{{> post newPost}}
		{{else}}
			{{> loadingRow}}
		{{/if}}
		{{#each posts}}
			<div class="discussion-conversation">
				{{> post}}
			</div>
		{{/each}}
		{{#if limited}}
			<button
				class="btn btn-add course-page-btn js-show-all-posts"
				type="button">
				<i class="fa fa-chevron-down fa-fw" aria-hidden="true"></i>
				{{#mf KEY='course.discussions.showAllComments' NUM=count}}
					Show all {NUM} comments
				{{/mf}}
			</button>
		{{/if}}
	</div>
</template>

<template name="post">
	{{#if editing}}
		{{> postEdit}}
	{{else}}
		{{> postShow}}
	{{/if}}
	{{#if notAllResponsesShown}}
		<button
			class="btn-link toggle-all-responses js-show-previous-replies"
			type="button">
			<i class="fa fa-chevron-down fa-fw" aria-hidden="true"></i>
			{{mf 'course.discussions.showPreviousReplies' 'Show all previous answers'}}
		</button>
	{{/if}}
	{{#each responses}}
		{{> post}}
	{{/each}}
	{{#if allowResponse}}
		{{> post newResponse}}
	{{/if}}
</template>

<template name="postShow">
	{{#if new}}
		{{#if parentId}}
			<div class="discussion-reply">
				<button type="button" class="js-discussion-edit btn btn-add discussion-reply-btn" {{disabledIfBusy}}>
					{{#if busy 'saving'}}
						<span class="fa fa-circle-o-notch fa-spin fa-fw" aria-hidden="true"></span>
						{{mf '_button.saving'}}
					{{else}}
						<span class="fa fa-reply fa-fw" aria-hidden="true"></span>
						{{mf 'course.discussion.comment_answer' 'Answer'}}
					{{/if}}
				</button>
			</div>
		{{else}}
			<button type="button" class="btn btn-add course-page-btn js-discussion-edit" {{disabledIfBusy}}>
				{{#if busy 'saving'}}
					<span class="fa fa-circle-o-notch fa-spin fa-fw" aria-hidden="true"></span>
					{{mf '_button.saving' 'Saving...'}}
				{{else}}
					<span class="glyphicon glyphicon-pencil fa-fw" aria-hidden="true"></span>
					{{mf 'course.discussion.write_comment' 'Write a comment'}}
				{{/if}}
			</button>
		{{/if}}
	{{else}}
		<div {{postClasses}} id="comment{{_id}}">
			{{> profileIcon userId}}
			<div class="discussion-post-content">
				<div class="discussion-post-header">
					{{> profileLink userId}}
					<span class="discussion-post-time"
						title="{{dateformat time_created}}">
						{{fromNow time_created}}
					</span>
					{{#if hasBeenEdited}}
						<span class="comment-time-updated"
							title="{{dateformat time_updated}}">
							last update:{{fromNow time_updated}}
						</span>
					{{/if}}
					<span class="discussion-buttons">
						{{#if mayEdit}}
							<button type="button" class="js-discussion-edit discussion-edit-btn"
								data-tooltip="{{mf '_button.edit'}}">
								<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
							</button>
						{{/if}}
						{{#if mayDelete}}
							{{> removeCommentDropdown}}
						{{/if}}
					</span>
				</div>
				<div class="discussion-post-body">
					{{#if this.title}}
						<h4 class="discussion-post-title">
							{{this.title}}
						</h4>
					{{/if}}
					<p>{{{text}}}</p>
				</div>
			</div>
		</div>
	{{/if}}
</template>

<template name="postEdit">
	<div class='{{postClass}} {{#if new}}{{#unless parentId}}discussion-post-new{{/unless}}{{/if}}'>
		{{> profileIcon userId}}
		<div class="discussion-edit-content">
			<form>
			<div class="discussion-edit-header">
				{{#if showUserId}}
					{{> profileLink userId}}
				{{else}}
					<strong>{{mf 'discussion.anonymous' 'Anonymous'}}</strong>
				{{/if}}
				<span class="discussion-post-time">
					{{#unless new}}
						{{fromNow time_created}}
					{{/unless}}
				</span>
				{{#if hasBeenEdited}}
					<span class="comment-time-updated">
						last update:{{fromNow time_updated}}
					</span>
				{{/if}}
			</div>
			<div class="discussion-edit-body">
				<div class="form-group">
					<input class="js-post-title discussion-edit-title form-control"
						type="text"
						placeholder="{{mf 'course.discussion.title_placeholder' 'Title'}} {{mf '_inputField.optional'}}"
						value="{{title}}"/>
				</div>
				<div class="form-group js-post-text">
						{{> editableTextarea editableText}}
				</div>
				{{#if canNotifyAll}}
					<div class="checkbox">
						<label class="">
							<input class='js-notify-all'
								type='checkbox'
								{{notifyAllChecked}}>
							<i class="fa fa-bell" aria-hidden="true"></i>
							{{mf 'course.discussion.notifyAll' 'Notify all participants'}}
						</label>
					</div>
				{{/if}}
				{{#if new}}
					<div class="checkbox">
						<label class="discussion-toggle-anonymous">
							<input class='toggleAnonymous js-anon'
								type='checkbox'
								{{anonChecked}}
								{{anonDisabled}}/>
							<i class="fa fa-user-secret" aria-hidden="true"></i>
							{{mf 'course.discussion.anon' 'Anonymous comment'}}
						</label>
					</div>
				{{/if}}
				<div class="form-actions">
					<button type="submit" class="btn btn-save discussion-save-btn" {{disabledIfBusy}} {{enableWhenValid}}>
						<span class="fa fa-send fa-fw" aria-hidden="true"></span>
						{{#if new}}
							{{#if parentId}}
								{{mf 'course.discussion.comment_btn.answer' 'Answer!'}}
							{{else}}
								{{mf 'course.discussion.comment_btn.write' 'Write!'}}
							{{/if}}
						{{else}}
								{{mf 'course.discussion.comment_btn.update' 'Update my comment!'}}
						{{/if}}
					</button>
					{{> buttonCancel event="js-discussion-cancel"}}
				</div>
			</div>
			</form>
		</div>
	</div>
</template>

<template name="profileLink">
	{{#if this}}
		<a class="profilelink" href="/user/{{this}}/{{username this}}">
			{{username this}}
		</a>
	{{else}}
		<span class="username">
			Anonymous
		</span>
	{{/if}}
</template>

<template name="profileIcon">
	<div class="discussion-thumb">
		{{#if this}}
			<a href="/user/{{this}}/{{username this}}">
				<img class="discussion-profile-icon"
					src="/logo/OpenkiLogo_quadratisch_2kanal_alpha.png"/>
			</a>
		{{else}}
			<img class="discussion-profile-icon"
				src="/logo/OpenkiLogo_quadratisch_2kanal_alpha.png"/>
		{{/if}}
	</div>
</template>


<template name="removeCommentDropdown">
	<span class="dropdown">
		<button type="button" class="discussion-delete-btn dropdown-toggle"
			aria-expanded="false"
			aria-haspopup="true"
			data-toggle="dropdown"
			data-tooltip="{{mf '_button.delete'}}">
			<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
		</button>
		<ul class="dropdown-menu dialog-dropdown right">
			<li class="dropdown-header">
				{{mf 'comment.delete.header' 'Delete comment'}}
				<button class="close">&times;</button>
			</li>
			<li class="divider" role="seperator"></li>
			<li class="dialog-dropdown-text">
				{{mf 'comment.delete.confirm' 'Do you really want to delete this comment?'}}
			</li>
			<li class="dialog-dropdown-btn">
				<button type="button" class="btn btn-remove js-delete-comment">
					<span class="fa fa-remove"></span>
					{{mf 'course.discussion.deleteCommentButton' 'Delete'}}
				</button>
			</li>
		</ul>
	</span>
</template>
