@extends('layouts.app')
@section('content')

<div role="main" class="main">
	<section class="page-header mb-0">
		<div class="container">
			<div class="row align-items-center">
				<div class="col-md-6 text-left">
					<h1 class="font-weight-bold">ギャラリー</h1>
				</div>

				<div class="col-md-6">
					<ul class="breadcrumb justify-content-start justify-content-md-end mb-0">
						<li><a href="{{ route('/', [ 'locale' => Request::has('locale') ? Request::get('locale') : 'en' ]) }}">ホーム</a></li>
						<li class="active">ギャラリー</li>
					</ul>
				</div>
			</div>
		</div>
	</section>

	<section class="section">
		<div class="container">

					<ul class="nav sort-source mb-4" data-sort-id="portfolio" data-option-key="filter" data-plugin-options="{'layoutMode': 'fitRows', 'filter': '*'}">
					</ul>

					<div class="lightbox" data-plugin-options="{'delegate': 'a.open-lightbox', 'type': 'image', 'gallery': {'enabled': true}, 'mainClass': 'mfp-with-zoom'}">
						<div class="sort-destination-loader sort-destination-loader-loaded">
							<ul class="portfolio-list portfolio-list-style-3 sort-destination" data-sort-id="portfolio" data-filter="*" style="position: relative; height: 1027.78px;">

								@if( isset($galleries) && count($galleries) > 0)
									@foreach($galleries as $key => $value)
										<li class="col-sm-6 col-md-4 col-lg-3 p-0 isotope-item brands" style="position: absolute; left: 0px; top: 0px;">
											<div class="portfolio-item hover-effect-3d" style="perspective: 1000px;">
												<span class="image-frame image-frame-style-1 image-frame-effect-1" style="perspective: 1000px; transform: none;">
													<span class="image-frame-wrapper">
														<img src="{{ asset('uploads/galleries/'.$value->image) }}" class="img-fluid" alt="">
														<span class="image-frame-inner-border" style="perspective: 1000px; transform: translateX(-2.64375px);"></span>
														<span class="image-frame-action image-frame-action-effect-1 image-frame-action-sm" style="perspective: 1000px; transform: rotateY(-1.0575deg) rotateX(0.76099deg) translateY(0.76099px) translateX(-1.0575px);">
															<a href="{{ asset('uploads/galleries/'.$value->image) }}" class="open-lightbox">
																<span class="image-frame-action-icon">
																	<i class="lnr lnr-magnifier text-color-light"></i>
																</span>
															</a>												
														</span>
													</span>
												</span>
												@if(isset($value->remark))
												<br><h4>{{ $value->remark }}</h4>	
												@endif
											</div>
										</li>
									@endforeach
								@endif							
							</ul>
						<div class="bounce-loader"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div></div>
					</div>

				</div>
	</section>

</div>



@endsection



@section('css')



@endsection



@section('js')  



@endsection