{{@player}}
<div>
<div>
	<table style="width:100%;border:0px;background:0;">
		<tr>
			<td colspan="2">
				<h2>{{.title}}</h2>
			</td>
		</tr>
		<tr>
			<td>
				Uploaded by <b><a href='/channel/{{.channel_id}}'>{{.uploader}}</a></b> on <b>{{.upload_date}}</b><br>
				<br>
				{{start ?fav}}<a href='fav.shs?v={{.id}}' target='_blank'>Add to favourites</a><br>{{end ?fav}}
				{{start ?unfav}}<a href='unfav.shs?v={{.id}}' target='_blank' style="color:#d00;">Remove from favourites</a><br>{{else ?unfav}}{{end ?unfav}}
				{{start ?sub}}<a href='subscribe.shs?id={{.channel_id}}' target='_blank'>Subscribe to {{.uploader}}!</a><br>{{end ?sub}}
				{{start ?unsub}}<a href='unsubscribe.shs?id={{.channel_id}}' target='_blank' style="color:#d00;">Unsubscribe from {{.uploader}}!</a><br>{{end ?unsub}}
				{{start ?login}}<b><a href='/login.shs?r={{.login_r}}'>Log in</a> to add this video to your favourites and/or subscribe to this channel!</b><br>{{end ?login}}
			</td>
			<td style="text-align: right; vertical-align: top;">
				<b>{{.view_count}}</b> views<br>
				<b>{{.like_count}}</b>{{start ?like_state}} likes{{end ?like_state}}<br>
			</td>
		</tr>
	</table>
</div>
<pre><i>Description</i>:<br>{{.description}}</pre>
</div>

{{start ?playlist}}
<h1>Playlist</h1>

<script type='text/javascript'>
	window.addEventListener('DOMContentLoaded', (event) => {
		var video = document.querySelector('video');
		video.addEventListener('ended', function() {
			window.location = 'watch?v={{.next}}&playlist={{.playlist_id}}';
		});
	});
</script>

<div style='display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));'>
	{{start _playlist}}
	<div class='video-image-container'>
		<a href='watch?v={{.id}}&playlist={{.playlist}}'>
			<div class='video-image' style='background-image: url(http://i.ytimg.com/vi/{{.id}}/mqdefault.jpg)'></div>
			<b>{{.title}}</b></a>
	</div>
	{{end _playlist}}
	</div>
{{end ?playlist}}

<h1>Recommended</h1>
<div style='display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));'>
{{start _recommended}}

<div><a href='/watch?v={{.id}}'><img src='https://i.ytimg.com/vi/{{.id}}/mqdefault.jpg'><br><b>{{.title}}</b></a></div>

{{end _recommended}}
</div><h1>Comments</h1>
<div class='comments'></div>
<script src='/js/watch.js'></script>