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

@section('title', $league['name'].' | Sport 1')

@section('content')

    <div class="global-wrap">
        @include('mobile.layouts._breadcrumb',['pageName'=> $league['name']])
	
		<header class="widget widget-heading-mobile-league">
			<img src="{{ $league['url_logo'] }}" alt="{{ $league['name'] }}" class="league-logo">
			<div class="league-text">
				<h3 class="league-name heading-md">{{ $league['name'] }}</h3>
				<h4 class="league-location">{{ $league['country']['name'] }}</h4>
			</div>
		</header>

		<div class="widget widget-tabs-lined widget-tabs-lined-mobile">
			<ul class="tab-nav">
				<li class="active">
					<a href="{{ url('league/'.$league['id'].'/news') }}" title="{{ $league['name'] }} - News">News</a>
				</li>
				<li>
					<a href="{{ url('league/'.$league['id'].'/standings') }}" title="{{ $league['name'] }} - Standings">Standings</a>
				</li>
				<li>
					<a href="{{ url('league/'.$league['id'].'/fixtures') }}" title="{{ $league['name'] }} - Fixtures">Fixtures</a>
				</li>
			</ul>
		</div> <!-- tabs -->
		<header class="widget widget-heading-small mt-3">
			<h2 class="title heading-md">
				<a href="" title="">News</a>
			</h2>
			<ul class="heading-tabs">
				<li class="active">
					<a href="#news-1" title="Last" aria-selected="true">Last</a>
				</li>
				<li>
					<a href="#news-2" title="Popular" aria-selected="false">Popular</a>
				</li>
			</ul>
		</header>
        <div class="box-generic tab-content">
        	<div id="news-1" style="" aria-hidden="false">
                <div class="widget widget-news-grid widget-news-grid-horizontal">
                    <div class="grid">
                    	@if(count($leagueArticles) > 0)
                            @foreach($leagueArticles as $article)
                            <a href="{{ url('article/'.$article['id']) }}" title="{{ $article['title'] }}" class="item col-1-2">
                                <div class="photo photo-m-second">
                                    @if(isset($article['imgPaths']['data']['urls']['uploaded']['original']))
                                        <img src="{{ $article['imgPaths']['data']['urls']['uploaded']['original'] }}" alt="{{ $article['title'] }}">
                                    @elseif(isset($article['imgPaths']['data']['urls']['16x9']['770_433']))
                                        <img src="{{ $article['imgPaths']['data']['urls']['16x9']['770_433'] }}" alt="{{ $article['title'] }}">
                                    @else
                                        <img src="../resources/image/temp/image_placeholder.png" alt="{{ $article['title'] }}">
                                    @endif
                                </div>
                                <h2 class="title heading-sm">{{ $article['title'] }}</h2>
                                <em class="time">{{ $article['fromDate'] }}</em>
                            </a>
                            @endforeach
                        @else
                         	<div class="item col-1-2">
								<h2 class="title heading-sm">Currently there's no articles for {{ $league['name'] }}</h2>
							</div>
                        @endif
                    </div>
                </div> <!-- widget -->
                {{ $leagueArticles->onEachSide(1)->links('vendor.pagination.default') }}
            </div>
            <div id="news-2" style="" aria-hidden="true">
                <div class="widget widget-news-grid widget-news-grid-horizontal">
                    <div class="grid">
                    	@if(count($mostReadLeagueArticles) > 0 )
                            @foreach($mostReadLeagueArticles as $mArticle)
                            <a href="{{ url('article/'.$mArticle['id']) }}" title="{{ $mArticle['title'] }}" class="item col-1-2">
                                <div class="photo photo-m-second">
                                    @if(isset($mArticle['imgPaths']['data']['urls']['uploaded']['original']))
                                        <img src="{{ $mArticle['imgPaths']['data']['urls']['uploaded']['original'] }}" alt="{{ $mArticle['title'] }}">
                                    @elseif(isset($mArticle['imgPaths']['data']['urls']['16x9']['770_433']))
                                        <img src="{{ $mArticle['imgPaths']['data']['urls']['16x9']['770_433'] }}" alt="{{ $mArticle['title'] }}">
                                    @else
                                        <img src="../resources/image/temp/image_placeholder.png" alt="{{ $mArticle['title'] }}">
                                    @endif
                                </div>
                                <h2 class="title heading-sm">{{ $mArticle['title'] }}</h2>
                                <em class="time">{{ $mArticle['fromDate'] }}</em>
                            </a>
                            @endforeach

                         @else
                         <div class="item col-1-2">
							<h2 class="title heading-sm">Currently there's no popular articles for {{ $league['name'] }}</h2>
                         </div>
                        @endif
                    </div>
                </div> <!-- widget -->
            </div>
        </div> <!-- box -->
    </div>
@endsection