@extends('layout/user')

@section('tittle', 'Profil')

@section('container')
<section class="page-header page-header-modern bg-color-dark-scale-1 page-header-md">
	<div class="container">
		<div class="row">
			<div class="col-md-12 align-self-center p-static order-2 text-center">
				<h1 class="text-light font-weight-bold text-8">Gallery</h1>
				<span class="sub-title text-light">Sekolah Tinggi Ilmu Tarbiyah Al-Bukhary Labuhanbatu</span>
			</div>
			<div class="col-md-12 align-self-center order-1">
				<ul class="breadcrumb d-block text-center">
					<li><a href="{{url('/')}}">Home</a></li>
					<li class="active">Gallery</li>
				</ul>
			</div>
		</div>
	</div>
</section>
<div class="container py-4">

	<div class="row">
		<div class="col">
			<div class="blog-posts single-post">
				<article class="post post-large blog-single-post border-0 m-0 p-0">
					<div class="post-image ms-0">
						<div class="lightbox" data-plugin-options="{'delegate': 'a', 'type': 'image', 'gallery': {'enabled': true}, 'mainClass': 'mfp-with-zoom', 'zoom': {'enabled': true, 'duration': 300}}">
							<div class="row mx-0">
								@foreach ($gallery as $g)
								<div class="col-6 col-md-4 p-1">
									<a href="{{url('foto/gallery/'.$g->foto)}}">
										<span class="thumb-info thumb-info-no-borders thumb-info-centered-icons">
											<span class="thumb-info-wrapper" style="height: 210px;">
												<img src="{{url('foto/gallery/'.$g->foto)}}" class="img-fluid" alt="" />
												<span class="thumb-info-action">
													<span class="thumb-info-action-icon thumb-info-action-icon-light"><i class="fas fa-plus text-dark"></i></span>
												</span>
											</span>
										</span>
									</a>
								</div>
								@endforeach
							</div>
						</div>
					</div>
				</article>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-lg-12 text-center">
			{{ $gallery->links() }}
		</div>
	</div>

</div>

@endsection