<template name="calendar">
	{{> calendarNav date=startDate}}
	<div class="container calendar-container">
		<div class="page-component">
			{{#each days}}
				{{> calendarDay day=this filter=filter}}
				<hr>
			{{/each}}
		</div>
	</div>
</template>

<template name="calendarAddEvent">
	<a href="{{pathFor 'showEvent' _id='create'}}">
		<div class="event-caption placeholder event-caption-add">
			<div class="event-caption-header-wrap">
				<div class="event-caption-header">
					<span class="fa fa-map-pin"></span>
					<div class="event-caption-pseudoborder"></div>
				</div>
			</div>
			<div class="event-caption-body-wrap">
				<div class="event-caption-body"></div>
			</div>
		</div>
		<span class="event-caption-add-text">
			{{mf 'menue.CreateEvent'}}
		</span>
	</a>
</template>

<template name="calendarDay">
	<div class="calendar-date">
		{{calendarDay day.start}}
	</div>
	{{#if eventsReady}}
		{{#unless hasEvents}}
			<br>
			{{mf 'calendar.noCoursesThisDay' "There are no events on this day"}}
		{{/unless}}
		{{#if hasEvents}}
			<div class="calendar-event-list">
				{{> eventList dataEvents=events withDate=false}}
			</div>
		{{/if}}
	{{else}}
		{{> loadingRow}}
	{{/if}}
</template>

<template name="calendarNav">
	<div class="calendar-nav-container">
		<div class="calendar-nav">
			{{> calendarNavControl direction='previous'}}
			<div class="calendar-nav-moment">
				<div class="calendar-nav-week">
					{{mf "calendar.weekNumber" "Week "}} {{weekNr date}}
				</div>
				<div class="calendar-nav-date">
					{{dateLong date}} - {{dateLong (endDateTo date)}}
				</div>
			</div>
			{{> calendarNavControl direction='next'}}
		</div>
	</div>
</template>

<template name="calendarNavControl">
	<div class="calendar-nav-control">
		<div class="btn-group">
			<button type="button"
					class="btn btn-default js-change-date">
				{{arrow}}
				{{mfString direction currentUnit 'short'}}
			</button>
			<button type="button"
					class="btn btn-default dropdown-toggle"
					aria-expanded="false"
					aria-haspopup="true"
					data-toggle="dropdown">
				<span class="fa fa-list-ul fa-fw" aria-hidden="true"></span>
			</button>
			<ul class="dropdown-menu">
				{{#each navUnits}}
					<li>
						<a class="js-change-unit" href="#">
							{{mfString ../direction this 'long'}}
						</a>
					</li>
				{{/each}}
			</ul>
		</div>
	</div>
</template>

<template name="calendarNavMF">
	{{mf 'calendar.previous.week.short' 'previous week'}}
	{{mf 'calendar.previous.month.short' 'previous month'}}
	{{mf 'calendar.previous.year.short' 'previous year'}}
	{{mf 'calendar.next.week.short' 'next week'}}
	{{mf 'calendar.next.month.short' 'next month'}}
	{{mf 'calendar.next.year.short' 'next year'}}
	{{mf 'calendar.previous.week.long' 'Go to previous week'}}
	{{mf 'calendar.previous.month.long' 'Go to previous month'}}
	{{mf 'calendar.previous.year.long' 'Go to previous year'}}
	{{mf 'calendar.next.week.long' 'Go to next week'}}
	{{mf 'calendar.next.month.long' 'Go to next month'}}
	{{mf 'calendar.next.year.long' 'Go to next year'}}
</template>
