<template name="timetableLayout">
	{{> yield}}
</template>

<template name="timetable">
	<div class="container-fluid timetable">
		<div class="timetable-header">
			<div class="timetable-days">
			{{#each days}}
				<div class="timetable-day" style={{position}}>
					{{showDay moment}}
				</div>
			{{/each}}
			</div>
			<div class="timetable-hours">
				{{#each hours}}
					<div class="timetable-hour" style={{position}}>
						{{showHour moment}}
					</div>
				{{/each}}
			</div>
		</div>
		{{#each this.grouped}}
			<div class="timetable-row">
				<div class="timetable-location">
					<a href="{{pathFor 'venueDetails' data=location}}">
						<span class="glyphicon glyphicon-home fa-fw" aria-hidden="true"></span>
						{{venue.name}}
					</a>
				</div>
				{{#each rows}}
					<div class="timetable-row-section">
						{{#each this}}
							<a href="{{pathFor  'showEvent'}}" class="timetable-event" style={{position}}>
								<div class="timetable-event-title">
									{{this.title}}
								</div>
								<div class="timetable-event-time">
									<span class="fa fa-clock-o fa-fw" aria-hidden="true"></span>
									{{timeformat start}} - {{timeformat end}}
								</div>
								<div class="timetable-event-description">{{{description}}}</div>
							</a>
						{{/each}}
					</div>
				{{/each}}
			</div>
		{{/each}}
	</div>
</template>
