@extends('layouts.main_page_website')
 <style>
	 .container.gallery-container {
    background-color: #fff;
    color: #35373a;
    min-height: 100vh;
    padding: 30px 50px;
}

.gallery-container h1 {
    text-align: center;
    margin-top: 50px;
    font-family: 'Droid Sans', sans-serif;
    font-weight: bold;
}

.gallery-container p.page-description {
    text-align: center;
    margin: 25px auto;
    font-size: 18px;
    color: #999;
}

.tz-gallery {
    padding: 40px;
}

/* Override bootstrap column paddings */
.tz-gallery .row > div {
    padding: 2px;
}

.tz-gallery .lightbox img {
    width: 100%;
    border-radius: 0;
    position: relative;
}

.tz-gallery .lightbox:before {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -13px;
    margin-left: -13px;
    opacity: 0;
    color: #fff;
    font-size: 26px;
    font-family: 'Glyphicons Halflings';
    content: '\e003';
    pointer-events: none;
    z-index: 9000;
    transition: 0.4s;
}


.tz-gallery .lightbox:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-color: rgba(46, 132, 206, 0.7);
    content: '';
    transition: 0.4s;
}

.tz-gallery .lightbox:hover:after,
.tz-gallery .lightbox:hover:before {
    opacity: 1;
}

.baguetteBox-button {
    background-color: transparent !important;
}
.pp_nav { display: none !important; }
@media(max-width: 768px) {
    body {
        padding: 0;
    }
}
 </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  animated fadeInDown">
							<!-- <li><a href="#">Video</a></li> -->
							<li class="active">Video Gallery</li>
						</ol>
					</div>
				</div>
			</div>
		</div>
		<!--************************************
				Banner End
		*************************************-->
		<!--************************************
				Main Start
		*************************************-->
        <main id="tg-main" class="tg-main tg-haslayout">
			<!--************************************
					Soccer Media Start
			*************************************-->
			<section class="tg-main-section tg-soccermedia tg-haslayout">
				<div class="container">
					<div class="col-sm-12 col-xs-11 pull-right">
						<div class="row">
							<div class="tg-tg-soccermedia-head tg-haslayout  animated zoomIn">
								@if(count($videos)>0)
								<ul id="tg-filterbale-nav" class="tg-filterbale-nav option-set">
									<li><a class="active" data-filter="*" href="javascript:void(0);">All Videos</a></li>

								</ul>
								@endif
							</div>
						</div>
					</div>
				</div>

				<div id="tg-soccermediascrollbar" class="tg-soccermediascrollbar container">
					<div id="filter-masonry" class="tg-soccermedia-content tg-haslayout">

						@forelse($videos as $video)
						<div class="masonry-grid  animated zoomIn">
							<div class="tg-project">
								<figure class="tg-postimg">
									<a data-rel="prettyPhoto[iframe]" href="https://youtu.be/{{$video->video_id}}" class="tg-playbtn"></a>
									<img src="{{$video->cover_image}}" alt="image description">
									<figcaption>
										<a class="tg-theme-tag" data-rel="prettyPhoto[iframe]" href="https://youtu.be/{{$video->video_id}}"><i class="fa fa-play"></i></a>
										<h3>{{$video->caption}}</h3>
									</figcaption>
								</figure>
							</div>
						</div>
						@empty
						<div class="col-lg-12">
							<div class="news-details-wrap">
								<div class="news-large-post">
									<div class="post-txt" style="text-align: center">

										<p>
											<h6 style="color: red">No video added yet</h6>								
										</p>

									</div>
								</div>
							</div>
						</div>
						@endempty
					</div>
				</div>


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


@stop