@extends('layouts.landing')

@section('title')
    {{ __('message.Detail Galeri') }}
@endsection

@section('content')
    <section class="wrapper bg-soft-primary position-relative">
        <div class="container pt-20 pb-10 pt-md-20 text-center">
            <div class="row">
                <div class="col-lg-8 mx-auto mb-5">
                    {{-- <h1 class="fs-15 text-uppercase text-muted mb-3"></h1> --}}
                    <h3 class="display-1 mb-6">{{ $gallery->name }}</h3>

                    <a href="{{ route('landing.gallery') }}" class="btn btn-primary">{{ __('message.Kembali') }}</a>
                </div>
                <!-- /column -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container -->
        <div class="overflow-hidden">
            <div class="divider text-light mx-n2">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 60">
                    <path fill="currentColor" d="M0,0V60H1440V0A5771,5771,0,0,1,0,0Z" />
                </svg>
            </div>
        </div>
    </section>
    <section class="wrapper bg-light">
        <div class="container py-14 py-md-16">
            <!-- /.row -->
            <div class="grid grid-view projects-masonry">
                <div class="row gx-md-8 gy-10 gy-md-13 isotope">

                    @foreach (json_decode($gallery->images) as $i)
                        <div class="project item col-md-6 col-xl-4 product">
                            <figure class="lift rounded mb-6"><a href="javascript:void(0)"> <img
                                        src="{{ asset('uploads/landing-page/gallery/photo/' . $i) }}" alt="" /></a>
                            </figure>
                        </div>
                    @endforeach

                </div>
                <!-- /.row -->
            </div>
            <!-- /.grid -->
        </div>
        <!-- /.container -->
    </section>
@endsection