@extends('layouts.web')

@section('title', 'Gallery')

@section('content')

<div class="hero-wrap" style="background-image: url('images/bg_2.jpg');" data-stellar-background-ratio="0.5">
    <div class="overlay"></div>
    <div class="container">
      <div class="row no-gutters slider-text align-items-center justify-content-center" data-scrollax-parent="true">
        <div class="col-md-7 ftco-animate text-center" data-scrollax=" properties: { translateY: '70%' }">
           <p class="breadcrumbs" data-scrollax="properties: { translateY: '30%', opacity: 1.6 }"><span class="mr-2"><a href="{{ route('index') }}">Home</a></span> <span>Gallery</span></p>
          <h1 class="mb-3 bread" data-scrollax="properties: { translateY: '30%', opacity: 1.6 }">Galleries</h1>
        </div>
      </div>
    </div>
  </div>

  <section class="ftco-section ftco-gallery">
      <div class="container">
        <div class="row">
            @foreach ($galleries as $gallery)
                <div class="col-md-4" style="padding-left: 0px; padding-right: 0px;">
                    <a href="{{ $gallery->image_path }}" class="gallery image-popup d-flex justify-content-center align-items-center img ftco-animate" style="background-image: url({{ $gallery->image_path }});">
                        <div class="icon d-flex justify-content-center align-items-center">
                            <span class="icon-search"></span>
                        </div>
                    </a>
                </div>    
            @endforeach
        </div>
        {{-- {!! $galleries->links() !!} --}}
      </div>
        <div class="d-flex mt-4 justify-content-center">
            {!! $galleries->links() !!}
        </div>
  </section>
  
@push('styles')
{{-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> --}}

    {{-- <link href="css/test-home.css" rel="stylesheet" /> --}}
@endpush


@push('scripts')
    {{-- <script src="js/test-home.js"></script> --}}
@endpush