@inject('webpackAssets', 'FootyRoom\Support\WebpackAssets')
  @inject('frConfig', 'FootyRoom\Config')
  
  <div ng-controller="ExtraContentCtrl" ng-click="onClick()" class="extra-content" ng-init='tabs = {!! json_encode($tabs) !!}'>
  	<nav id="ec_tab_menu" class="clearfix">
  		<ul>
  			@if (isset($guide))
  				<li class="simple-tab guide-tab-link" ng-class="{active: activeTab === 'guide'}">
  					<a ng-click="activeTab = 'guide'">Guide</a>
  				</li>
  			@endif
  
  			@if ($tables)
  				<li class="simple-tab" ng-class="{active: activeTab === 'tables'}">
  					<a ng-click="activeTab = 'tables'">Tables</a>
  				</li>
  			@endif
  
  			@if ($stats)
  				<li class="simple-tab" ng-class="{active: activeTab === 'stats'}">
  					<a ng-click="activeTab = 'stats'">Stats</a>
  				</li>
  			@endif
  
  			@if (count($matches) > 0)
  				<li class="simple-tab" ng-class="{active: activeTab === 'fixtures'}">
  					<a ng-click="activeTab = 'fixtures'">Fixtures</a>
  				</li>
  			@endif
  		</ul>
  	</nav>
  
  	<div id="extra_content" ng-cloak>
  		@if ($tables)
  			<script type="text/javascript">
  				DataStore['tables'] = {!! json_encode($tables) !!};
  			</script>
  			<div id="ec_table" class="ec-slide-shell" ng-if="activeTab === 'tables'">
  				<div ng-include src="'standings'"></div>
  			</div>
  		@endif
  
  		@if (isset($guide))
  			@foreach ($guide['webpackAssets'] as $asset)
  				<?php $webpackAssets->require($asset); ?>
  			@endforeach
  			
  			<div id="ec_guide" ng-show="activeTab === 'guide'">
  				{!! $guide['html'] !!}
  			</div>
  		@endif
  			
  		@if (count($matches) > 0)
  			<div ng-controller="leagueCalendarCtrl" ng-if="activeTab === 'fixtures'">
  				<script>
  					DataStore['matchDays'] = {!! json_encode($matchDays) !!};
  					DataStore['matches'] = {!! json_encode($matches) !!};
  				</script>
  				
  				<div fr-datepicker options="datepickerOptions"></div>
  				
  				<div class="calendar-fixtures" ng-class="{closed: matchesCount > 16 && !interacted}">
  					<div ng-repeat="dateGroup in matchesByDate">
  						<header class="ls-match-group-header ca-date-header">
  							<div class="ls-date" ng-bind=":: dateGroup.date | date:'EEEE, d MMMM'"></div>
  						</header>
  						<div ng-repeat="match in ::dateGroup.matches" class="ls-match ca-match" fr-ca-match="match">
  							@include('competition/calendarMatch')
  						</div>
  					</div>
  					<footer class="ca-fixt-footer text-center clearfix">
  						<div class="ca-fixt-utc">All times are in UTC</div>
  						<a class="update pointer" ng-click="reload()">Update Scores <span class="icn-reload"></span></a>
  					</footer>
  					<div class="ca-fixt-more pointer">See More <span class="icn-tick-down"></span></div>
  				</div>
  			</div>
  		@endif
  
  		@if ($stats)
  			<div class="ec-slide-shell" ng-if="activeTab === 'stats'">
  				<div class="ec-stats-wrap">
  					<script type="text/javascript">
  						DataStore['stage'] = {!! json_encode($stats) !!};
  			    	</script>
  
  			    	<div stat-card type="goals" card-title="Goals" data="data.stage.goalsByPlayer"></div>
  			    	<div stat-card type="assists" card-title="Assists" data="data.stage.assistsByPlayer"></div>
  			    	<div stat-card type="yellow-cards" card-title="Yellow Cards" data="data.stage.yellowCardsByPlayer"></div>
  			    	<div stat-card type="red-cards" card-title="Red Cards" data="data.stage.redCardsByPlayer"></div>
  			    </div>
  
  			    <div style="margin: 10px 30px; color: #999;">*Showing stats from all stages of the season</div>
  			</div>
  		@endif
  	</div>
  </div>
  
  {{-- Angular Templates --}}
  
  <script type="text/ng-template" id="stage-table">
  	<div ng-repeat="table in stage.standings" class="league-table">
  
  		<h2 class="table-title" ng-show="isGroups && stage.type == 'group'">@{{ stage.name }}</h2>
  		<h2 class="table-title" ng-show="table.conference">@{{ table.conference }} Conference</h2>
  		
  		<div class="table-row table-head clearfix">
  			<div class="table-cell pointer table-cell--rank" ng-class="{sorted: sortie == 'adjustedRank'}" ng-click="sortBy('adjustedRank', 'asc')">#</div>
  			<div class="table-cell table-cell--name"></div>
  			<div class="table-cell pointer" ng-class="{sorted: sortie == 'data.played.value'}" ng-click="sortBy('data.played.value')">P</div>
  			<div class="table-cell pointer" ng-class="{sorted: sortie == 'data.wins.value'}" ng-click="sortBy('data.wins.value')">W</div>
  			<div class="table-cell pointer" ng-class="{sorted: sortie == 'data.draws.value'}" ng-click="sortBy('data.draws.value')">D</div>
  			<div class="table-cell pointer" ng-class="{sorted: sortie == 'data.defeats.value'}" ng-click="sortBy('data.defeats.value')">L</div>
  			<div class="table-cell pointer hidden-xs" ng-class="{sorted: sortie == 'data.goalsfor.value'}" ng-click="sortBy('data.goalsfor.value')">GF</div>
  			<div class="table-cell pointer hidden-xs" ng-class="{sorted: sortie == 'data.goalsagainst.value'}" ng-click="sortBy('data.goalsagainst.value')">GA</div>
  			<div class="table-cell pointer" ng-class="{sorted: sortie == goalDifference}" ng-click="sortBy(goalDifference)">GD</div>
  			<div class="table-cell pointer" ng-class="{sorted: sortie == 'data.points.value'}" ng-click="sortBy('data.points.value')">Pts</div>
  			<div class="table-cell table-cell--form hidden-xs">Form</div>
  			<div class="table-cell table-cell--next hidden-xs">Next</div>
  		</div>
  
  		<div class="table-body">
  			<div class="table-row clearfix" ng-repeat="team in table.participants | orderBy:sortie:reversed">
  				<div class="table-cell table-cell--rank" ng-class="{sorted: sortie == 'adjustedRank'}"><span class="table-rank legend" ng-class="team.spots.join(' ')">@{{team.adjustedRank}}</span></div>
  				<div class="table-cell table-cell--name">
  					<span title="Previous Rank @{{ team.data.previousRound.rank }}" 
  							ng-class="{
  								'table-movement table-movement--up icn-tick-up': team.data.currentRound.rank < team.data.previousRound.rank, 
  								'table-movement table-movement--down icn-tick-down': team.data.currentRound.rank > team.data.previousRound.rank, 
  								'table-movement table-movement--still': team.data.currentRound.rank == team.data.previousRound.rank || !team.data.previousRound.rank}">
  					</span>
  					<img class="table-badge" ng-src="https://@{{ ds.imagesHost }}/badges/@{{ team.teamId }}" />
  					@{{team.name}}
  				</div>
  				<div class="table-cell" ng-class="{sorted: sortie == 'data.played.value'}">@{{team.data.played.value || 0}}</div>
  				<div class="table-cell" ng-class="{sorted: sortie == 'data.wins.value'}">@{{team.data.wins.value || 0}}</div>
  				<div class="table-cell" ng-class="{sorted: sortie == 'data.draws.value'}">@{{team.data.draws.value || 0}}</div>
  				<div class="table-cell" ng-class="{sorted: sortie == 'data.defeats.value'}">@{{team.data.defeats.value || 0}}</div>
  				<div class="table-cell hidden-xs" ng-class="{sorted: sortie == 'data.goalsfor.value'}">@{{team.data.goalsfor.value || 0}}</div>
  				<div class="table-cell hidden-xs" ng-class="{sorted: sortie == 'data.goalsagainst.value'}">@{{team.data.goalsagainst.value || 0}}</div>
  				<div class="table-cell" ng-class="{sorted: sortie == goalDifference}">@{{goalDifference(team) || 0}}</div>
  				<div class="table-cell" ng-class="{sorted: sortie == 'data.points.value'}">@{{team.data.points.value || 0}}</div>
  				<div class="table-cell table-cell--form hidden-xs">
  					<a ng-href="/matches/@{{ form.matchId }}/-/review"
  						class="table-form table-form--@{{ form.result }}"
  						ng-repeat="form in team.form"
  						title="@{{ form.homeTeam.name }} @{{ form.homeScore }} - @{{ form.awayScore }} @{{ form.awayTeam.name }}">
  						@{{ form.result }}
  					</a>
  				</div>
  				<div class="table-cell table-cell--next hidden-xs">
  					<a ng-if="team.next" class="table-next-link" ng-href="/matches/@{{ team.next.matchId }}/-/review" title="@{{ team.next.homeTeam.name }} - @{{ team.next.awayTeam.name }}">
  						<img class="table-badge table-badge--next" ng-if="team.next.homeTeam.id != team.teamId" src="https://@{{ ds.imagesHost }}/badges/@{{ team.next.homeTeam.id }}" /> 
  						<img class="table-badge table-badge--next" ng-if="team.next.awayTeam.id != team.teamId" src="https://@{{ ds.imagesHost }}/badges/@{{ team.next.awayTeam.id }}" />
  					</a>
  					<span ng-if="!team.next">—</span>
  				</div>
  			</div>
  		</div>
  
  		<div class="table-legend" ng-show="table.legend.length > 0">
  			<div class="table-legend-item" ng-repeat="spot in table.legend">
  				<span class="table-legend-mark legend" ng-class="spot.code"></span> @{{ spot.name }}
  			</div>
  		</div>
  	
  	</div>	
  </script>
  
  <script type="text/ng-template" id="stage-tables">
  	<div ng-include="'stage-table'" ng-if="(stage.haveTables && (activeTableStage == stage || stage.type == 'group'))"></div>
  
  	<div ng-if="activeTableStage == stage || stage.childrenHaveTables">
  
  		<div ng-repeat="stage in stage.children | orderBy:'name'"
  			 ng-include="'stage-tables'"
  			 ng-init="tree = treeName(tree, stage.name); showw = (stage.id == currentStage.id || showw == true)">
  		</div>
  	
  	</div>
  </script>
  
  <script type="text/ng-template" id="standings-menu">
  	<div ng-if="(stage.childrenHaveTables && stage.childrenAreGroups) || (stage.standings && stage.type != 'group')"
  		ng-click="setActive(stage)" class="table-select-li">@{{ tree }}</div>
  	
  	<div ng-repeat="stage in stage.children | orderBy:'name'" ng-init="tree = treeName(tree, stage.name)">
  		<div ng-include="'standings-menu'"></div>
  	</div>
  </script>
  
  <script type="text/ng-template" id="standings">
  	<div ng-controller="TablesController">
  		<div ng-click="show =! show" class="table-select" ng-show="(data.stages | filter: {childrenHaveTables: true}).length > 1">
  			<a href="">@{{ activeTableName }}</a>
  		</div>
  
  		<div ng-show="show" class="table-select-ul">
  			<div ng-repeat="stage in data.stages | orderBy:'name' | filter:{parent:season.id}" ng-init="tree = stage.name">
  				<div ng-include="'standings-menu'"></div>
  			</div>
  		</div>
  
  		<div ng-repeat="stage in data.stages | orderBy:'name'| filter:{parent:season.id}" ng-init="showw = (stage.id == currentStage.id || currentStage.id == season.id)">
  			<div ng-include="'stage-tables'" ng-init="tree = stage.name"></div>
  		</div>
  	</div>
  </script>
  
  <script type="text/ng-template" id="league-stats-table-template">
  	<div class="stats-card-wrap" ng-show="data && data.length > 0">
  		<div class="stats-card" ng-class="[type]">
  			<div class="header">
  				<div class="graphic"></div>
  				<h3>@{{title}}</h3>
  			</div>
  
  			<div class="table-body">
  				<div class="table-row clearfix" ng-repeat="stat in data">
  					<div class="table-cell" style="flex: 1; justify-content: flex-start;">@{{stat.name}}</div>
  					<div class="table-cell" style="flex: none; text-align: right">@{{stat.goals || stat.cards || stat.assists}}</div>
  				</div>
  			</div>
  		</div>
  	</div>
  </script>