@extends('frontend.layouts.main')
@push('title')
    <title>Photo Gallery</title>
@endpush
@section('main-section')
    {{-- start-breadcrumb --}}
    <div class="breadcrumb-banner">
        <div class="container">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{ url('/gallery/picture-gallery') }}">Photo Gallery</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ ucwords(str_replace('-', ' ', $slug)) }}</li>
                </ol>
            </nav>
            <h3>{{ ucwords(str_replace('-', ' ', $slug)) }}</h3>
        </div>
    </div>
    {{-- end-breadcrumb --}}

    {{-- start-main --}}

    <main>
        <div class="container ptb">
            <div class="row">
                <div class="col-md-12">
                    <div class="main-title-wrapper">
                        <h2 class="main-title">{{ ucwords(str_replace('-', ' ', $slug)) }}<span class="title-accent"></span>
                        </h2>
                    </div>
                    <div class="gallery-section">
                        <ul id="lightgallery" class="row">
                            @if ($images)
                                @foreach ($images as $image)
                                    <li class="col-lg-3 col-md-4 col-sm-6 col-6"
                                        data-src="{{$image}}">
                                        <a href="">
                                            <img class="img-responsive"
                                                src="{{$image}}">
                                            <div class="gallery-poster">
                                                <img src="{{ asset('frontend/lightgallery/images/thumb.png') }}">
                                            </div>
                                        </a>
                                    </li>
                                @endforeach
                            @endif
                        </ul>
                    </div>
                </div>
            </div>
        </div>

    </main>

    {{-- end-main --}}
@endsection