{{ nav = data.main.headLink; ""}}
{{ request = data.system.path.sub[0]; ""}}

  	<article ng-init="request = data.system.path.sub[0]">
		<a name="top"></a>

		<h1 class="border" ng-if="!data.system.customtitle">Playlist</h1>
		<h1 class="border" ng-if="!!data.system.customtitle">{{ data.system.customtitle }}</h1>

		<nav class="playlist-pagination">

			<div class="playlist-weeks">
			<!-- Previous page link -->
				<span class="float-left"><a href="/muziek/{{ request }}/{{ nav.prev.date }}/19#top">Vorige week</a></span>
				
			<!-- Next page link -->
				<span class="float-right"><a href="/muziek/{{ request }}/{{ nav.next.date }}/19#top">Volgende week</a></span>
			</div>

			<!--  Alternative SELECT for small resolutions -->
			<span id="playlist-days-select" class="select-alternative">
				<select class="playlist-days" name="playlist-days">
					<option value="/muziek/{{ request }}/{{ option.href }}#top" ng-repeat="option in data.main.days" ng-class="{ 'active' : option.name == data.main.now.date_short }">
						{{ option.name }}
					</option>
				</select>
			</span>
			<!-- // End alternative -->

			<ul class="playlist-days">
				<li ng-repeat="option in data.main.days" ng-class="{ 'active' : option.name == data.main.now.date_short }">
					<a href="/muziek/{{ request }}/{{ option.href }}#top">{{ option.name }}</a>
				</li>
			</ul>

			<!--  Alternative SELECT for small resolutions -->
			<span id="playlist-hours-select" class="select-alternative">
				<select class="playlist-hours" name="playlist-hours">
					<option  value="/muziek/{{ request }}/{{ option.href }}/{{ option.name }}#top" ng-repeat="option in data.main.hours">
						{{ option.name }}:00 uur
					</option>
				</select>
			</span>
			<!-- // End alternative -->

			<ul class="playlist-hours">
				<li ng-repeat="option in data.main.hours" ng-class="{ 'active' : option.name == data.main.now.hour }">
					<a href="/muziek/{{ request }}/{{ option.href }}/{{ option.name }}#top" >{{ option.name }}</a>
				</li>
			</ul>
			<!-- // End alternative -->
		</nav>
		
		<h2 class="justify-center">Playlist van {{ data.main.now.name }}</h2>

		<div class="justify-center" ng-if="data.main.playlist.length == 0">
			Er zijn (nog) geen playlistgegevens bekend voor deze datum.
		</div>

		<table id="playlist" class="playlist" border="0" cellspacing="0" cellpadding="0" ng-if="data.main.playlist.length != 0">
			<thead>
				<tr>
					<th id="playlist-col-time">Tijd</th>
					<th id="playlist-col-duration">Duur</th>
					<th id="playlist-col-artist">Componist(en)<br />Werk<br />Uitvoerende(n)</th>
					<th id="playlist-col-label">Label</th>
				</tr>
		   	</thead>
	   	
		   	<tbody>
				<tr ng-repeat="item in data.main.playlist">
					<td><time datetime="{{ item.time }}" >{{ data.main.now.hour }}:{{ item.time }}</time></td>
					<td>{{ item.duration }}</td>
					<td>
						<strong>{{ item.composer }}</strong><br />				
						{{ item.title }}<br />
						<div ng-if="item.artist">{{ item.artist }}</div>
						<div ng-if="item.artist2">{{ item.artist2 }}</div>
						<div ng-if="item.artist3">{{ item.artist3 }}</div>
						<div ng-if="item.choirmaster">{{ item.choirmaster }}</div>
						<div ng-if="item.orchestra">{{ item.orchestra }}</div>
					</td>
					<td>{{ item.label }}</td>
				</tr>
			</tbody>
		</table>
		
	</article> 
	
	
	<div class='sharer_buttons' ng-include src="'views/_partials/share.html'"></div>