@extends('layout.home')

@section('content')
<style type="text/css">

	iframe{
		margin: 10px;
	}

	.image-slide img{
		margin: 10px;
		border-radius: 4px;
	}
</style>
<div class="container">


	
	<h1 class="topic">{{$gallery->gallery_name}}</h1>
	<p class='gallery-date'>{{$gallery->date}}</p>
	<div class="image-content">
		<p class='gallery-type'> Photo</p>
		<div class="row image-slide1 justify-content-center">	

			@foreach($images as $data)
			<div class='col-sm-4'>
				<div class="embed-responsive embed-responsive-16by9 embbed-image-container">
					<a class='embed-responsive-item embbed-item embbed-image' data-fancybox="gallery" href="/storage/{{$data->image_path}}">
						<img src='/storage/{{$data->image_path}}'>
					</a>
				</div>
			</div>
	
			@endforeach
		</div>

		<p class='gallery-type'> Videos</p>
		
		<div class="row justify-content-center">
				@foreach($videos as $data)
				<div class='col-sm-4'>
					<div class="embed-responsive embed-responsive-16by9">
							<iframe class="embed-responsive-item" src="https://youtube.com/embed/{{$data->video_path}}" allowfullscreen></iframe>
					</div>
				</div>
				@endforeach
		</div>	
	</div>
	<a id="next" href='{{ url()->previous() }}'>Back</a>

</div>

@endsection