<div header></div>
<div class="container-fluid" ng-if="showContent">

	<div class="general-padding bg-first">
		<h2 class="h2"><a href="/#!/video" title="Video" 
			ng-click="trackClickCat($event, 'video')">
			{{'WEBAPP_VIDEO' | dict }}</a>
		</h2>
	</div>	

	<div class="general-padding bg-second">
		<h1 class="big general-margin-b">{{video.title}}</h1>
		<p ng-show="{{ 'SHOW_DATES' | config }}" class="date"><span>{{video.timestamp | timestampToDate}}</span></p>			
	</div>	

	<div class="center-block">		
		<clip item="video" contentid="{{video.id}}" videoid="{{video.id}}" is-custom-video="true" 
			user-can-use="userCanUse"></clip>

		<p class="general-padding ">{{'WEBAPP_DURATION' | dict }} {{video.duration.formatted}}</p>	
	</div>

	<div class="general-padding bg-second">	
		<!-- DESCRIPTION -->
		<div>
			<p ng-bind-html="video.description"></p>
		</div>
	</div>	
	
	
	<!-- SOCIAL -->
	<div class="list-social list-social__no-img">				
		<div class="pull-right">
			<div class="inline-block">
				<p class="uppercase italic"><dict key="WEBAPP_SHARE_WITH"></dict></p>
			</div>	
			<div class="inline-block">
				<social-buttons share-url="video.url_share" title="video.title" id="videoId"></social-buttons>
			</div>			           			
		</div>	
	</div>
			
			
	<div class="other-news general-margin-t">
		<div class="general-padding">	
			<h3 class="small double-general-margin-b uppercase special-font">
				<dict key="WEBAPP_OTHER_NEWS"></dict>
			</h3>

			<div ng-if="videoListRelated" ng-repeat="item in videoListRelated">		
				<item content="item" class="both {{'TEMPLATING_ITEM_ZOOM_VIDEO' | config }}" callback="trackClickRelated($index, item.title)"></item>
			</div>	
		</div>
	</div>	
			
</div>	

<footer ng-show="showFooter"></footer>
