@extends('frontend.layouts.index')
@section('content')
    {{-- {{ dd($images) }} --}}
    <div class="container mt3">
        <div class="row">
            <section class="col-xs-12 col-sm-12 col-md-9">
                <div class="bgw o-fix border" style="display: flex;">
                    <div class="col-md-12">
                        <h2 class="title">{{ 'All Photos' }}</h2>
                        <div class="c-gallery col-xs-12">
                            <ul id="lightgallery" class="list-unstyled row">
                                @forelse($images as $img)
                                    @if (!$img->file->isEmpty())
                                        @foreach ($img->file as $image)
                                            <li class="col-xs-6 col-sm-4 col-md-3"
                                                data-src="{{ asset('uploads/photos') }}/{{ $image->filename }}"
                                                data-sub-html="<h2>{{ $img->title }}</h2><p>{{ \Illuminate\Support\Str::limit($image->description, 50) }}</p>"
                                                data-pinterest-text="Pin it1" data-tweet-text="share on twitter 1">
                                                <a href="#" class="fit-image zoom-img">
                                                    <img class="img-responsive"
                                                        src="{{ asset('uploads/photos') }}/{{ $image->filename }}"
                                                        alt="Thumb-1">
                                                    <div class="overlay"></div>
                                                </a>
                                            </li>
                                        @endforeach
                                    @endif

                                @empty
                                    <li>{{ 'Not published yet !!!' }}
                                    </li>
                                @endforelse
                            </ul>
                        </div>
                    </div>
                </div>
            </section>
            @include('frontend.includes.aside')
        </div>
    </div>
@endsection