@extends('mobile.layouts.mobile-app-amp')

@section('title', 'Home mobile')

@section('content')
	<div class="global-wrap">
		{{-- @include('mobile.layouts._breadcrumb',['pageName'=> ['Новините от днес']]) --}}
		<amp-carousel class="carousel2" width="450" height="300" layout="responsive" type="slides"
		  loop
		  
		  lightbox
		  delay="2000">
		  {{-- autoplay --}}
			@foreach($mostViewedArticles as $mArticle)
			  <div class="slide">
		  		<a href="{{ url('article/'.$mArticle['id']) }}" title="{{ $mArticle['title'] }}">
			  		@if(strpos($mArticle['imgPaths']['data']['urls']['uploaded']['original'], 'autocrop') == true)
				  		<amp-img src="{{ $mArticle['imgPaths']['data']['urls']['uploaded']['thumbnail'] }}"
					      layout="fill"
					      alt="{{ $mArticle['title'] }}"></amp-img>
					@else
						<amp-img src="{{ $mArticle['imgPaths']['data']['urls']['uploaded']['original'] }}"
					      layout="fill"
					      alt="{{ $mArticle['title'] }}"></amp-img>
					@endif
				</a>
				   <div class="caption">
				      {{ $mArticle['title'] }}
				  </div>
			  </div>
			@endforeach
		</amp-carousel>
		{{-- <div class="widget widget-carousel-2">
			<div class="content">
				@foreach($mostViewedArticles as $mArticle)
					<a href="{{ url('article/'.$mArticle['id']) }}" title="{{ $mArticle['title'] }}" class="entry">
						@if(isset($mArticle['imgPaths']['data']))
							@if(strpos($mArticle['imgPaths']['data']['urls']['uploaded']['original'], 'autocrop') == true)
								<div class="image" style="background: url({{ $mArticle['imgPaths']['data']['urls']['uploaded']['thumbnail'] }}) center center; background-size:cover;">
								</div>
							@else
								<div class="image" style="background: url({{ $mArticle['imgPaths']['data']['urls']['uploaded']['original'] }}) center center; background-size:cover;">
								</div>
							@endif
						@else
							<div class="image" style="background: url('../resources/image/temp/image_placeholder.png') center center; background-size:cover;">
							</div>
						@endif
						<h4 class="title">{{ $mArticle['title'] }}</h4>
					</a>
				@endforeach
			</div>
		</div> <!-- widget --> --}}
		<div class="box-generic-mobile">
			@include('mobile.layouts._infinite-template-amp',['allArticles' => $allArticlesByDate,'tournaments'=>$tournaments])
		</div>
@endsection

@push('scripts-mobile')
	<script src="{{ asset('dist/js/jscroll-master/jquery.jscroll.js')}}"></script>
	<script type="text/javascript">
		$('ul.pagination').hide();
		    $(function() {
		        $('.infinite-scroll').jscroll({
		            autoTrigger: true,
		            loadingHtml: '<img class="center-block" src="./dist/js/jscroll-master/images/loading-2.gif" alt="Зареждане..." />',
		            padding: 0,
		            nextSelector: '.pagination li.active + li a',
		            contentSelector: 'div.infinite-scroll',
		            callback: function() {
		                $('ul.pagination').remove();
		            }
		        });
		    });
	</script>
@endpush