@extends('Client.layouts.layout')
@section('content')


    <section class="py-5 bg-img">
        <div class="container">
            <div>
                <ol class="breadcrumb breadcrumb-arrow">
                    <li><a href="{{ route('client.home') }}">{{ __('trans.home')  }}</a></li>
                    <li><a class="color-white point">{{ __('trans.gallery') }}</a></li>
                </ol>
            </div>
            <!-- Start Row -->
            <div class="row">
                @foreach (\Modules\Gallery\Entities\Model::Active()->get() as $Item)
                    <div class="col-6 col-md-4 col-lg-3 d-flex align-items-center justify-content-center my-2 mx-auto">
                        <a href="{{ asset($Item->file) }}" data-fancybox="gallery" class="h-100 d-flex justify-content-center align-items-center" style="max-height: 200px;overflow: hidden;">
                          <img  loading="lazy" src="{{ asset($Item->file) }}" alt="Image" class="w-100">
                        </a>
                    </div>
                @endforeach
            </div>
            <!-- End Row -->
        </div>
    </section>

@endsection

@push('css')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"/>
@endpush

@push('js')


    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
    
    <script>
        Fancybox.bind('[data-fancybox="gallery"]', {
      // Your custom options for a specific gallery
    });
    </script>


@endpush