{layout '../layouts/hero.latte'}

{block content}
	<div class="columns is-centered is-vcentered">
		<div class="column">
			<video controls poster="{path('/stream?url=' . urlencode($feed->items[0]->video->originCover))}">
				<source src="{path('/stream?url=' . urlencode($feed->items[0]->video->playAddr))}" type="video/mp4" />
			</video>
		</div>
		<div class="column has-text-centered">
			<div class="box">
				<p class="title">Video by <a href="{path('/@'.$feed->info->detail->uniqueId)}">{$feed->info->detail->uniqueId}</a></p>
				<p class="subtitle">{$feed->items[0]->desc}</p>
				<p>Played {number($feed->info->stats->playCount)} times</p>
				<p>Shared {number($feed->info->stats->shareCount)} times / {number($feed->info->stats->commentCount)} comments</p>
				<hr />
				<a href="{path('/stream?url=' . urlencode($feed->items[0]->video->playAddr) . '&download=1')}" class="button is-info">Download video</a>
      	<p>{$feed->items[0]->music->title}</p>
      	<audio src="{path('/stream?url=' . urlencode($feed->items[0]->music->playUrl))}" controls preload="none"></audio>
			</div>
		</div>
	</div>
{/block}