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

{var $og = $info->meta->og}
{var $og_content = $item->video->originCover}
{var $og_url = url_video_internal($info->detail->uniqueId, $item->id)}

{if !empty($item->desc)}
	{var $title = trim($item->desc)}
{/if}

{block content}
	<div class="columns is-centered is-vcentered">
		<div class="column has-text-centered">
			{include '../components/themes/common/content.latte', item: $item, isAutoplay: true, isBig: true}
		</div>
		<div class="column">
			<div class="box">
				<article class="media">
  				<figure class="media-left">
  			  	<p class="image is-64x64">
  			    	<img src="{url_stream($info->detail->avatarThumb)}" />
  			  	</p>
  				</figure>
  				<div class="media-content">
  			    <p>
  			    	<strong>{$info->detail->nickname}</strong>
							<small>
								<a href="{url_user($info->detail->uniqueId)}">@{$info->detail->uniqueId}</a>
							</small>
							<small title="{date('M d, Y H:i:s e', $item->createTime)}">{date('M d, Y', $item->createTime)}</small>
  			    </p>
						{if !empty($item->challenges)}
						<p>{include '../components/themes/common/tags.latte', challenges: $item->challenges}</p>
						{/if}
						<div class="content">
							<p n:ifcontent>{render_desc($item->desc, $item->textExtra ?? [])|noescape}</p>
							<p>Song: {$item->music->title}</p>
							<audio controls preload="none" src="{url_stream($item->music->playUrl)}"></audio>
							{include '../components/themes/common/stats.latte', playCount: $item->stats->playCount, diggCount: $item->stats->diggCount, commentCount: $item->stats->commentCount, shareCount: $item->stats->shareCount}
							<div class="has-text-centered">
								{include '../components/themes/common/share.latte', uniqueId: $info->detail->uniqueId, id: $item->id}
								{if isset($item->video->playAddr)}
								<!-- Download links, not shown if item is a gallery -->
								{include '../components/themes/common/download.latte', playAddr: $item->video->playAddr, id: $item->id, uniqueId: $info->detail->uniqueId}
								{/if}
							</div>
						</div>
  				</div>
				</article>
			</div>
			{if !empty($item->comments)}
			<div class="box">
				<p class="is-size-5 has-text-centered">Comments</p>
				{foreach $item->comments as $comment}
				<article class="media">
				  <figure class="media-left">
				    <p class="image is-64x64">
				      <img src="{url_stream($comment->user->avatar_thumb->url_list[0])}" />
				    </p>
				  </figure>
				  <div class="media-content">
				    <div class="content">
				      <p>
				        <strong>{$comment->user->unique_id}</strong>
								<small>
									<a href="{url_user($comment->user->unique_id)}">@{$comment->user->nickname}</a>
								</small>
								<small title="{date('M d, Y H:i:s e', $comment->create_time)}">{date('M d, Y', $comment->create_time)}</small>
				        <br>
								{$comment->text}
				      </p>
				    </div>
						<p>{include '../components/icon.latte', icon: 'heart', text: number($comment->digg_count)}</p>
				  </div>
				</article>
				{/foreach}
			</div>
			{/if}
		</div>
	</div>
{/block}