@extends('layouts.default')
  
  @section('title', FootyRoom\Support\Utils\Helpers::title('Match Previews'))
  
  @section('content')
  	<div class="site-tree">
  		<a href="/">Home</a>
  		<div class="separator"></div>
  		<a href="/previews">Previews</a>
  		<div class="separator"></div>
  	</div>
  
  	<div id="mainBox">
  		<div id="previews">
  			<div class="header">
  				<h1>Match Previews</h1>
  			</div>
  			
  			<div class="clearfix">
  				@forelse ($previews as $preview)
  					<div class="col-sm-4 col-xs-12">
  						<div class="match-box">
  							<a href="{!! route('matchPreview', [
  								'id' => $preview->matchId,
  								'slug' => \FootyRoom\Http\Match\MatchSlug::fromTeams($preview->homeTeamName, $preview->awayTeamName)
  							]) !!}">
  								<div class="top-part clearfix">
  									<div class="team-badge"><img src="{!! $teamBadgeUrl($preview->homeTeamId) !!}" /></div>
  									<div class="vs">vs</div>
  									<div class="team-badge"><img src="{!! $teamBadgeUrl($preview->awayTeamId) !!}" /></div>
  								</div>
  								<div class="bottom-part clearfix">
  									<div class="team-name">{{ $preview->homeTeamName }}<span class="spacer">-</span>{{ $preview->awayTeamName }}</div>
  								</div>
  							</a>
  						</div>
  					</div>
  				@empty
  					<div class="info-box last-page">No previews at the moment. Check back later.</div>
  				@endforelse
  			</div>
  		</div>
  	</div>
  @endsection