@extends('layouts.public')

@section('title') {{trans('seo.title.galleries')}} @endsection

@section('content')

<div class="charity-subheader-two">
    <span class="charity-footer-transparent"></span>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="charity-page-title"><h1>{{$gallery->title}}</h1></div>
                <ul class="charity-breadcrumb">
                    <li><a href="{{route('public.index')}}">Naslovna</a></li>
                    <li class="active">Galerije</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="charity-main-content">
    <div class="charity-main-section charity-minus-margin-bottom">
        <div class="container-fluid">
            <div class="row">
                <div class="charity-gallery charity-masonery-gallery">
                    <ul>
                        @foreach($gallery->images as $image)
                        <li class="element-item metal col-md-4">
                            <figure>
                                <img src="{{asset($image->thumbnail)}}" alt="{{$gallery->title}}">
                                <figcaption>
                                    <div class="charity-masonery-hover">
                                        <span class="charity-left-top-border"></span>
                                        <span class="charity-right-top-border"></span>
                                        <span class="charity-left-bottom-border"></span>
                                        <span class="charity-right-bottom-border"></span>
                                    </div>
                                    <div class="charity-masonery-caption">
                                        <a data-fancybox-group="group" href="{{asset($image->path)}}" class="fancybox charity-gallery-btn"><i class="icon-add2"></i></a>
                                    </div>
                                </figcaption>
                            </figure>
                        </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('styles')
<style type="text/css">
.charity-main-content {
    padding: 0px 0px 60px 0px;
}
</style>
@endsection