@extends('app')

@section('head')
	<style type="text/css">
/*Reset*/
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed, 
	figure, figcaption, footer, header, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section {
		display: block;
	}
	body {
		line-height: 1;
		
	}
	ol, ul {
		list-style: none;
	}
	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}
/*End Reset*/
	body{
		background: #000;
		font-family: 'courier',monospace;
		color: #f4f4f4;
	}
	img{
		display: block;
		margin: 0 auto;
		max-width:100%;
	}
	.clearfix:before,.clearfix:after{
		content:" ";
		display: table;
	}
	.clearfix:after{
		clear:both;
	}
	
	.text-center{
		text-align: center;
	}
	h2{
		font-size: 36px;
	}
	h3{
		font-size: 28px;
	}
	#album-img{
		margin-top:10px;
		margin-bottom: 20px;
	}
	.container{
		padding: 0 15px; 
	}

	.pins-list{		
		margin: 40px  auto 0;
		display: inline-block;
		padding:0 0 0 5px;
	}
	.pins-list li{
		float: left;
		margin-right: 20px;
		margin-bottom: 20px;
		max-width: 50px;
		
	}

	.pins-list li.third-child{
		clear: right;
		margin-right: 0;
	}
	.pins-list li.fourth-child{
		clear: both;
	}

	.pins-list li:last-child{
		margin-right: 0;
	}
	#pxpx-text{
		width:100%;
		max-width:800px;
		margin-top:5px;
	}


	@media(min-width:760px){
		.pins-list li{
			max-width:60px;
		}
		.pins-list li.third-child,.pins-list li.fourth-child{
			clear: none;
		}
		.pins-list li.third-child{
			margin-right: 20px;
		}
		/*#album-img{
			margin-top: 0;
		}*/
		.table > tbody > tr > th{
			border-top:none;
			font-size: 20px;
		}
	}

	</style>
@stop

@section('content')
	<div class="container clearfix" id="fuckoff">
		<img src="images/pxpxpx.svg"  alt="The Potato Pirates" id="pxpx-text">
		@if(count($shows)>0)
			<h3 class="text-center">Upcoming Shows</h3>
			<div class="table-responsive" style="margin-top:30px;">
				<table class="table center-block" style="max-width:600px;">
					<tr class="heading-row">
						<th>Date</th>
						<th>City</th>
						<th>Venue</th>
					</tr>
					@foreach ($shows as $show) 
						<tr>
							<td>{{$show->date->format('M d')}}</td>
							<td>{{$show->location}}</td>
							<td>{{$show->venue}}</td>
						</tr>
					@endforeach
				</table>
			</div>
		@endif
		
		<div class="text-center">
			<ul class="clearfix pins-list" >
				<li><a href="https://www.facebook.com/potatopirates" target="_blank" title="Check out our Facebook"><img src="images/pin-face2.png" alt="Facebook Pin"></a></li>
				<li><a href="http://instagram.com/potatopirates" target="_blank" title="Look at Our Photos on Instagram"><img src="images/pin-insta.png" alt="Instagram Pin"></a></li>
				<li class="third-child"><a href="https://www.youtube.com/channel/UCUXqx0_9CEHJQbjz9NeJq5Q" target="_blank" title="Check out our YouTube profile"><img src="images/pin-yout.png" alt="YouTube Pin"></a></li>
				<li class="fourth-child"><a href="https://twitter.com/PotatoPirates" target="_blank" title="Check out our Twitter"><img src="images/pin-twit.png"  alt="Twitter Pin"></a></li>
				<li><a href="https://itunes.apple.com/us/artist/id259520278" target="_blank" title="Find our Music on Itunes"><img src="images/pin-itunes.png" alt="iTunes Pin"></a></li>
				<li><a href="http://potatopirates.bigcartel.com/products" target="_blank" title="View Our Online Store"><img src="images/pin-shit.png" alt="Big Cartel Pin"></a></li>
			</ul>
		</div>
	</div>
@stop

@section("footer")
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script>
		jQuery(window).load(function(){
			var contentContainer = $('#fuckoff'),
			winHeight = $(window).outerHeight(),
			contHeight = contentContainer.outerHeight();
			if (winHeight>contHeight){
				var offset = (winHeight-contHeight)/2;
				contentContainer.css({'margin-top':offset});
			}
		});
	</script>
@stop