@extends('layouts.webapp')
@section('title', __('menu.photo_gallery'))
@push('css')
    <!--    VENOBOX popup-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/venobox/2.0.4/venobox.min.css"
        integrity="sha512-HFaR9dTfvVVIkca85XvaYOlbZqtyRp5f7cyfb3ycnQU60RM1qjmJKq7qZPLDI+nudOkFDuY5giiwQqfbP7M36g=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
@endpush
@section('content')
    <section class="py-5">
        <div class="container">
            <div class="row">
                <div class="col-12 col-md-12">
                    <div class="page-title">
                        <h5>{{ __('menu.photo_gallery') }}</h5>
                    </div>
                    <div class="page-content py-5">
                        <div id="gallery">
                            <div class="row row-cols-1 row-cols-md-4 g-3">
                                @foreach ($galleries as $gallery)
                                    <div class="col">
                                        <a href="{{ asset($gallery->image) }}" class="gallery-photo " data-gall="gallery01">
                                            <img src="{{ asset($gallery->image) }}" class="img-responsive w-100">
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('js')
    <!--    venobox popup-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/venobox/2.0.4/venobox.min.js"
        integrity="sha512-KX9LF4BMXOG6qr9aGjFIPK1xysZAHWXpuZW6gnRi6oM+41qa8x4zaLPkckNxz5veoSWzmV5HZqPMMtknU+431g=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        new VenoBox({
            selector: '.gallery-photo',
            numeration: true,
            infinigall: true,
            share: true,
            spinner: 'rotating-plane'
        });
    </script>
@endpush