{layout "../layouts/{$layout}.latte"}

{block content}
	<div class="columns is-centered is-vcentered is-gapless">
		<div class="column is-three-quarters">
			<video controls autoplay playsinline poster="{path('/stream?url=' . urlencode($item->video->originCover))}">
				<source src="{path('/stream?url=' . urlencode($item->video->playAddr))}" type="video/mp4" />
			</video>
		</div>
		<div class="column has-text-centered">
			<div class="box">
				<p class="title">Video by <a href="{path('/@'.$detail->uniqueId)}">{$detail->uniqueId}</a></p>
				<p class="subtitle">{$item->desc}</p>
				{include '../components/themes/common/stats.latte', playCount: $item->stats->playCount, diggCount: $item->stats->diggCount, commentCount: $item->stats->commentCount, shareCount: $item->stats->shareCount}
				<hr />
				{include '../components/themes/common/share.latte', uniqueId: $detail->uniqueId, id: $item->id}
				{include '../components/themes/common/download.latte', playAddr: $item->video->playAddr, id: $item->id, uniqueId: $detail->uniqueId}
      	<p>{$item->music->title}</p>
      	<audio src="{path('/stream?url=' . urlencode($item->music->playUrl))}" controls preload="none"></audio>
			</div>
		</div>
	</div>
{/block}