@extends('layout/template')

@section('content')
    <div class="row" style="margin-top: 20px;">
        <div class="col-md-12">

                @foreach($galleries as $gallery)
                    <div class="row" style="margin-bottom: 20px;border-bottom: 1px solid grey;padding-bottom: 20px;">
                        <div class="col-md-4">
                            <h3>{{ $gallery->name }}</h3>
                            <img class="d-lg-none" src="/{{$tenant->url}}/{{$gallery->url}}/{{$gallery->main_image}}/file?size=big" style="width: 100%;">
                            <p>published {{ $gallery->gallery_create_time }}</p>
                            <p>{!! $gallery->html !!}</p>
                            <a href="/{{ $tenant->url }}/{{ $gallery->url }}/" class="btn btn-outline-primary">More</a>
                        </div>
                        <div class="col-md-8 d-none d-lg-block" style="text-align: center;">
                            <img src="/{{$tenant->url}}/{{$gallery->url}}/{{$gallery->main_image}}/file?size=big" style="width: 100%;">
                        </div>
                    </div>

                @endforeach

        </div>
    </div>

@endsection

@section('js')
    <link rel="stylesheet" href="/css/justifiedGallery.css" />
    <script src="/js/jquery.justifiedGallery.js"></script>
    <script>
        $("#mygallery").justifiedGallery({
            rowHeight: 250,
        });
    </script>
@endsection