<template name="eventPage">
	<div class="container-sm">
		{{> event}}
	</div>
</template>

<template name="eventNotFound">
	<h4>{{mf "event.no_event" "Sorry, we couldn't find this event, it must have been deleted or it never existed in the first place."}}</h4>
</template>

<template name="event">
	{{#if course}}
		<div class="event-course-header">
			<h2>
				{{course.name}}
			</h2>
			<a href="{{pathFor 'showCourse' _id=courseId}}" class="event-course-header-link">
				<i class="fa fa-external-link"></i>
				{{mf 'event.details.viewCourse' 'view course'}}
			</a>
			{{> courseCategories course}}
			{{> regionTag}}
		</div>
	{{/if}}
	<div class="event">
		{{#if editing}}
			{{> eventEdit}}
		{{else}}
			{{> eventDisplay}}
		{{/if}}
	</div>
	<div class="page-component">
		{{> report}}
	</div>
</template>

<template name="eventDisplay">
	<div class="page-component">
		<div class="details-header event-details-header">
				<span class="day">{{weekday startLocal}}</span><br>
				<span class="date">
					<span class="fa fa-calendar fa-fw" aria-hidden="true"></span>
					{{dateformat_mini_fullmonth startLocal}}
				</span>
				<span class="fa fa-clock-o fa-fw" aria-hidden="true"></span>
				{{timeformat startLocal}} - {{timeformat endLocal}}
		</div>
		<div class="details-body event-details-body">
			{{#unless courseId}}
				{{> regionTag}}
			{{/unless}}
			<div class="details-content">
				<h3>{{this.title}}</h3>
				<div class="tag-group multiline">
					{{> venueLink}}
					{{#if venue.address}}
						<div class="tag">
							<span class="fa fa-map-marker fa-fw" aria-hidden="true"></span>
							{{venue.address}}
						</div>
					{{/if}}
				</div>

				{{> eventGroupList}}

				<p class="event-details-description">
					{{#if hasVenue}}
						<div class="details-map">
							{{>map markers=eventMarkers}}
						</div>
					{{/if}}
					{{{description}}}
				</p>
			</div>
			{{> pricePolicy dismissable=true wrap='event-details-price-policy'}}
			{{> sharing}}
		</div>
		{{#if replicating}}
			{{>eventReplication}}
		{{/if}}
		{{#if mayEdit}}
			{{#if expanded}}
				{{> eventDeleteConfirmDialog}}
			{{else}}
				{{#unless replicating}}
					<div class="actions">
						{{> buttonEdit event="js-event-edit"}}
						<button type="button" class="btn btn-edit js-show-replication">
							<span class="fa fa-plus fa-fw" aria-hidden="true"></span>
							{{mf 'course.details.repl_menu_btn' 'Repeat'}}
						</button>
						<a
							class="btn btn-edit js-download"
							href="{{pathFor 'calEvent' this}}"
							title="{{mf 'event.detail.download_cal' 'Download event to my calendar'}}">
							<i class="fa fa-download fa-fw" aria-hidden="true"></i>
							{{mf 'event.details.download' 'Download'}}
						</a>
						{{> buttonDelete event="js-expand"}}
					</div>
				{{/unless}}
			{{/if}}
		{{/if}}
	</div>
</template>


<!-- COPYPASTA WARNING
    Below are slightly modified templates from course.details.html.
    Where possible, the original translation keys have been kept.

    Most of what is in these templates could be generalized across courses and
    events. It's the pesky translation strings where I think we'll run into
    trouble when we try to unite them.
-->
<template name="eventDeleteConfirmDialog">
	<div class="event-delete-confirmation">
		<p>{{mf 'event.reallydelete' 'Please confirm that you would like to delete this event. This cannot be undone.'}}</p>
		<div class="form-actions">
			{{> buttonDeleteConfirm
				event="js-event-delete-confirm"
				textIdle=(mf 'event.delete.confirm.button' 'Delete this event')
				textBusy=(mf 'event.delete.confirm.button.busy' 'Deleting event...')
			}}
			{{> buttonCancel event="js-collapse"}}
		</div>
	</div>
</template>

<template name="eventGroupList">
	<div class="tag-group multiline">
		{{#each allGroups}}
			{{> 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'}}
							<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}}
		{{> eventGroupAdd}}
	</div>
</template>


<template name="eventGroupAdd">
	{{#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'}}
					<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="eventGroupRemove">

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


<template name="eventGroupMakeOrganizer">
	{{#if expanded}}
		<div class="group-tool-dialog add">
			{{#with groupId}}
				{{mf 'event.group.confirmOrgText' "Add group {NAME} as organizers?" NAME=name}}
			{{/with}}
			{{mf 'event.group.confirmOrgNotes' "All members of this group will be able to edit this event."}}
			<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'}}
		</a>
	{{/if}}
</template>

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