@extends('layouts.main_page_website')
<style>
	/* .row-no-padding .col-sm-3 {
    padding-left: 0;
    padding-right: 0;
    box-shadow: 20px 20px 50px 15px grey;
} */

	.row-no-padding {
		display: -ms-flexbox;
		/* IE10 */
		display: flex;
		-ms-flex-wrap: wrap;
		/* IE10 */
		flex-wrap: wrap;
		padding: 0 4px;
	}

	/* Create four equal columns that sits next to each other */
	.column {
		-ms-flex: 25%;
		/* IE10 */
		flex: 20%;
		max-width: 25%;
		padding: 0;
		box-shadow: 20px 20px 50px 15px grey;

	}

	.column img {}

	/* .gallery-thumb-span {
		position: absolute;
		left: -3px;
		top: 20px;
		background: #373542;
		color: #fff;
		font-size: 12px;
		font-weight: 700;
		text-transform: uppercase;
		line-height: 28px;
		padding: 0 15px;
		border-radius: 3px;
		z-index: 99;
	} */

	.gallery-thumb {
	width: 100%;
	float: left;
	overflow: hidden;
	position: relative;
	border-radius: 3px;
}
.gallery-thumb span {
	position: absolute;
	left: -3px;
	bottom: 20px;
	background: #373542;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 28px;
	padding: 0 15px;
	border-radius: 3px;
	z-index: 99;
}
.gallery-thumb img {
	width: 100%;
	height: auto;
}
.gallery-thumb:after {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.5);
	content: "";
	opacity: 0;
}
.gallery-thumb a {
	position: absolute;
	left: -200px;
	right: 0;
	top: 0;
	bottom: 0;
	width: 40px;
	height: 40px;
	background: #fff;
	border-radius: 3px;
	margin: auto;
	text-align: center;
	line-height: 40px;
	color: #373542;
	z-index: 999;
	opacity: 0;
}
.gallery-thumb:hover:after {
	opacity: 1;
}
.gallery-thumb:hover a {
	left: 0;
	opacity: 1;
}
.gallery-thumb a:hover {
	background: #373542;
	color: #fff;
}


	/* Responsive layout - makes a two column-layout instead of four columns */
	@media screen and (max-width: 800px) {
		.column {
			-ms-flex: 50%;
			flex: 50%;
			max-width: 50%;
		}
	}

	/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
	@media screen and (max-width: 600px) {
		.column {
			-ms-flex: 100%;
			flex: 100%;
			max-width: 100%;
		}
	}
</style>

@section('content')
<div class="tg-banner tg-haslayout">
	<div class="tg-imglayer">
		<img src="/images/bg-pattran.png" alt="image desctription">
	</div>
	<div class="container">
		<div class="row">
			<div class="tg-banner-content tg-haslayout">
				<div class="tg-pagetitle animated flipInY">
					<h1>Media</h1>
				</div>
				<ol class="tg-breadcrumb">
					<!-- <li><a href="#">Home</a></li> -->
					<li class="active">Photo Gallery</li>
				</ol>
			</div>
		</div>
	</div>
</div>
<!--************************************
				Banner End
		*************************************-->
<!--************************************
				Main Start
		*************************************-->
<main id="tg-main" class="tg-main tg-haslayout d-flex justify-content-center">
	<!--************************************
					Soccer Media Start
			*************************************-->
	<section class="tg-main-section tg-soccermedia tg-haslayout">
		<div class="container ">
						<div class="tg-tg-soccermedia-head ">
								<ul id="tg-filterbale-nav" class="tg-filterbale-nav">									
									<li>
										<a href='/media-pg' class="btn btn-sm" style="cursor: pointer;">All Albums</a>
									</li>
									
                                </ul>
                            </div>

			

			
				<div class="row row-no-padding ">
					
					@if(isset($gallery))
						@foreach ($gallery as $item)
						<div class="column animated bounceIn" style="margin:3px;">
									<a class="" data-rel="prettyPhoto[iframe]" href="{{$item->image}}">
											<img src="{{$item->image}}" alt="image description">
									</a>
								</div>
						
						@endforeach
					@endif
				</div>	
				
			<center>
			    	@if(isset($gallery))
					{{ $gallery->appends(['folder_id' => $album_id])->links()}}
				@endif
			</center>
		
		</div>
		

	</section>

	<!--************************************
					Soccer Media End
			*************************************-->


</main>
<!--************************************
				Main End
		*************************************-->


@stop