@extends('layout.home')
@section('content')

<script type="text/javascript">
	$(function($) {
		$("img.lazy").Lazy({effect : "fadeIn"});
	});
</script>

<div class="container">

	@include('layout.direction')
<!-- 	<div class="topic">
		{{$article->title}}
	</div> -->


	<div class="article">
		<div class="sidebar">
			<p class="item"><a href="/article/{{$article->article_id}}">General</a></p>
			@if($article->gallery_id != null)
			<p style="background-color: #ffd800;" class="item"><a href="/article/{{$article->article_id}}/gallery">Gallery</a></p>
			@endif 
			@if(count($attachment) !=0)
			<p class="item"><a href="/article/{{$article->article_id}}/pdf">PDF</a></p>
			@endif 
		</div>
		<div class="data-content  data-content-item">	
			<span>Video</span>
			<div class="video gallery-flex ">

				@foreach($gallerys->videos as $data)
				<div>
					<iframe src="https://youtube.com/embed/{{$data->video_path}}"  height="250" width="250" frameborder="0" allowfullscreen></iframe>
				</div>
				@endforeach
			</div>
			<span>Photo</span>
			<div class="photo gallery-flex ">

				@foreach($gallerys->images as $data)
				<div style="height:187.5px;overflow:hidden;">
					<a   data-fancybox="gallery" href="/storage/{{$data->image_path}}"><img class="lazy"  width="250" height="auto" src="" data-src='/storage/{{$data->image_path}}'></a>
				</div>


				@endforeach
			</div>
		</div>
	</div>
	<a id="next" href='/{{$type}}'>Back to {{$type}}</a>
</div>
@endsection