@extends('frontend.layouts.app')

@section('content')

        <!-- ======= Breadcrumbs ======= -->
    <section id="breadcrumbs" class="breadcrumbs">
      <div class="container">
        <ol>
          <li><a href="/">Home</a></li>
          <li>Gallery</li>
        </ol>
        <h2>Pictures repository</h2>
      </div>
    </section><!-- End Breadcrumbs -->

    <!-- ======= Portfolio Details Section ======= -->
    <section id="portfolio-details" class="portfolio-details">
    <div class="container">
         <div class="row">
            <div class="col-lg-12 text-center my-2">
                <h4>Image gallery</h4>
            </div>
         </div>
         
         <div class="portfolio-item row">
            @foreach ($pictures as $picture)

            <div class="item selfie col-lg-3 col-md-4 col-6 col-sm">
               <a href="{{ asset($picture->image) }}" class="fancylight popup-btn" data-fancybox-group="light"> 
               <img class="img-fluid" src="{{ asset($picture->image) }}" alt="">
               </a>
            </div>
            @endforeach
         </div>

         <div class="d-flex justify-content-center w-100 mt-3">
            
            {!! $pictures->links() !!}
            
        </div>
      </div>
    </section><!-- End Portfolio Details Section -->


@endsection