<div header></div>
<div class="container-fluid">
	<ul class="tab-news tab-news--home" ng-show="showLatestSection">
		<li class="col-xs-6">
			<h1 class="medium special-font uppercase">
				<a href="" ng-click="changeTab('home')" ng-class="{'active' : activeTab == 'home'}">{{'WEBAPP_HOME' | dict }}</a>
			</h1>
		</li>
		<li class="col-xs-6">
			<h1 class="medium special-font uppercase">
				<a href="" ng-click="changeTab('latest')">
				{{'WEBAPP_LATEST' | dict }}</a>
			</h1>
		</li>
		<li class="col-xs-6">
			<div class="animation-tab" ng-class="{'active-tab' : activeTab == 'latest'}"></div>
		</li>	
	</ul>

	<!-- HOME -->	
	<div class="ng-hide" ng-show="activeTab == 'home'">
		<div class="on-slider" data-mipqa="slider-container-mobile">	
			<slider show="ready && showSlider" slides="slides" autoplay transition="slide" duration="300" indicators="true" 
			ng-show="{{ 'SHOW_HOME_CAROUSEL' | config }}" callback="trackClickSlider"></slider>
		</div>

		<div class="off-slider" ng-if="ready && !showSlider" data-mipqa="slider-container-desktop">
			<div class="container-slider both">
				<div class="content-img">
					<div class="badge badge--lasted">
						<h1 class="font-mini">
							<dict key="SEO_WEBAPP_HEAD_TITLE_TOP">
							</dict>
						</h1>
					</div>
					<ul>
						<li ng-repeat="slide in slides" >		    	
					    	<h3 ng-if="slide.title"> 
					    		<a ng-href="{{slide.url_zoom}}" title="{{slide.title}}" ng-click="trackClickSlider($event, slide.title, $index)" data-mipqa="slide-item"> 
					    			{{slide.title}}
					    		</a>
					    	</h3>
					        <a ng-href="{{slide.url_zoom}}" title="{{slide.title}} {{'SEO_WEBAPP_IMG_TITLE_ATTR' | dict }}" ng-click="trackClickSlider($event, slide.title, $index)">
								<picture>
									<img ng-src="{{slide.images.cover.ratio_1 | imagesize:1024:768}}" alt="{{slide.title}} {{'SEO_WEBAPP_IMG_ALT_ATTR' | dict }}">
									<div class="custom-player" ng-if="slide.custom_content_type == 'video'"></div>
								</picture>
					        </a>

					        <p ng-show="{{ 'SHOW_DATES' | config }}" class="italic" ng-if="slide.timestamp"> 
					        	{{slide.timestamp | timestampToDate}}
					        </p> 
					    </li>
					</ul>
				</div>
			</div>		    
		</div>

		<!-- VIDEO -->
		<div class="bg-first general-padding" ng-if="video.length">

			<div class="title-sections" >
				<div>
					<h2 class="italic">{{'WEBAPP_VIDEO' | dict }}</h2>	
					<h2 class="h2 pull-left">
						<a href="/#!/video" title="VIDEO" ng-click="trackClickVideoAll($event, 'Video')">
							{{'WEBAPP_VIDEO' | dict }}
						</a>
					</h2>

					<div class="pull-right">
						<a class="inline-block" href="/#!/video" title="Video" ng-click="trackClickVideoAll($event, 'Video')">
							<div class="btn btn--more">
									{{'WEBAPP_ALL' | dict }}
							</div>
						</a>
					</div>

				</div>

			</div>

			<div class="both tag video-item">
				<div ng-repeat="item in video" class="repeat-item">
					<item content="item" class="both {{ 'TEMPLATING_ITEM_HOME_VIDEO' | config }}" callback="trackClickVideo(item.title, $index)" ></item>
				</div>
			</div>
		</div>

		<!-- TAG -->
		<div class="bg-first general-padding" data-mipqa="home-tag-div" ng-if="showTag">
			<div class="title-sections">
				<div>
					<h2 class="italic"><dict key="WEBAPP_TITLE_NEWS_TAG"></dict></h2>	
					<h2 class="h2 pull-left">
						<a href="{{tag.url_zoom}}" title="{{tag.name}}" ng-click="trackClickTagAll($event, tag.name)">
							{{tag.name}}
						</a>
					</h2>

					<div class="pull-right" ng-show="showTagSection">
						<a class="inline-block" href="{{tag.url_zoom}}" title="{{tag.name}}" ng-click="trackClickTagAll($event, tag.name)">
							<div class="btn btn--more">
									{{'WEBAPP_ALL' | dict }}
							</div>
						</a>
					</div>


				</div>

			</div>

			<div class="both tag">
				<div ng-repeat="item in tag.items" class="repeat-item" data-mipqa="home-tag-item">
					<item content="item" class="both {{ 'TEMPLATING_ITEM_HOME_TAG' | config }}" callback="trackClickTag(item.title, $index)" ></item>
				</div>
			</div>
		</div>

		<!-- CATEGORY -->
		<div class="general-padding bg-second" data-mipqa="home-categories-div">
			<div ng-repeat="category in categories">
				<div class="title-sections title-sections--category">
					<div>	
						<h2 class="h2 pull-left">
							<a ng-href="{{category.url_zoom}}" title="{{category.name}}" ng-click="trackClickCatAll($event, category.name, $index)">
								{{category.name}}
							</a>
						</h2>

						<div class="pull-right">
							<a  class="inline-block" ng-href="{{category.url_zoom}}" title="{{category.name}}" ng-click="trackClickCatAll($event, category.name, $index)">
								<div class="btn btn--more" >
										{{'WEBAPP_ALL' | dict }}
								</div>
							</a>
						</div>

					</div>

				</div>

				<div class="both category {{ 'TEMPLATING_ITEM_HOME_CATEGORY' | config }} bg-second" >
					<div ng-repeat="item in category.items" class="repeat-item" data-mipqa="home-categories-item">
						<item content="item" class="both category" callback="trackClickCat($parent.$index, item.title, $index)"></item>
					</div>
				</div>		
			</div>	
		</div>
	</div>	
	<!-- END HOME -->

	<!-- LATEST -->	
	<div class="" ng-show="activeTab == 'latest' && showLatestSection">
		<div class="bg-first general-padding">

			<h1 class="h2 general-margin-t-b">{{'WEBAPP_LATEST' | dict }}</h1>

			<div class="both category {{ 'TEMPLATING_ITEM_LATEST_FIRST' | config }}">	
				<div ng-repeat="item in firstLatest" class="repeat-item"> 

					<!-- BLOCK REPEAT ITEM - FIRST 4 -->
						<item content="item" class="both" callback="trackClick(item.title, $index)"></item>
					<!-- END BLOCK REPEAT ITEM -->	

				</div>
			</div>	
		</div>
		<!-- END FIRST BLOCK -->

		<!-- Infinite Scroll -->
		<div infinite-scroll infinite-callback="getLatest" infinite-enable="gettingLatest" infinite-offset="0">
			<scrolltotop></scrolltotop>
		  <!-- BLOCK OTHER NEWS -->
			<div class="other-news" ng-show="otherLatest.length">
				<div class="general-padding">
					<div class="both {{ 'TEMPLATING_ITEM_LATEST_OTHERS' | config }}">	
						<h3 class="double-general-margin-b uppercase">{{'WEBAPP_OTHER_NEWS' | dict }}</h3>
						<div ng-repeat="item in otherLatest" class="item-layout"> 

							<!-- BLOCK REPEAT ITEM - REMAIN -->

								<item content="item" class="both" callback="trackClickOther(item.title, $index)"></item>

							<!-- END BLOCK REPEAT REMAIN ITEM -->

						</div>
					</div>	
				</div>
			</div>
			<!-- END BLOCK OTHER NEWS -->
		</div>
		<div ng-show="gettingLatest">
			<div class="center-block general-padding">
				<div class="loader"></div>
			</div>	
		</div>	
	</div>			
	<!-- END LATEST -->

	
</div>

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