@extends('layouts.app')

@section('meta-title'){{ $gallery->name }} - Rub & Roll Barbecue @endsection

@section('meta-keywords') @endsection

@section('meta-description') @endsection

@section('content')

<section id="page-title" class="page-title bg-overlay {{--bg-parallax--}} bg-overlay-gradient">
    <div class="bg-section">
        @if($page->image)
        <img src="{{ url($page->getFirstMediaUrl('image', 'cover')) }}" alt="" />
        @else
        <img src="assets/images/page-title/4.jpg" alt="Background" />
        @endif
    </div>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="col-xs-12 col-sm-12 col-md-12">
	                <div class="title title-8 text-center">
	                    <div class="title--content">
	                        <div class="title--subtitle">Galéria</div>
	                        <div class="title--heading">
	                            <h1>{{ $gallery->name }}</h1>
	                        </div>
	                    </div>
	                    <div class="clearfix"></div>
	                </div>
	            </div>
            </div>
        </div>
    </div>
</section>

<section id="portfolio" class="portfolio portfolio-gallery portfolio-5col pt-80 bg-white">
    <div class="container-fluid pr-0 pl-0">
        <div id="portfolio-all" class="row-no-padding">

        	@foreach($gallery->images as $image)
	            <div class="col-xs-12 col-sm-6 col-md-3 portfolio-item filter-chefs filter-people">
	                <div class="portfolio--img">
			            <img src="{{ url($image->getUrl('thumbnail')) }}" alt="" />
	                    <div class="portfolio--hover">
	                        <div class="portfolio--action">
	                            <div class="pos-vertical-center">
	                                <div class="portfolio--zoom">
	                                	<img src="{{ url($image->getUrl('thumbnail')) }}" alt="" />
	                                </div>
	                            </div>
	                        </div>
	                    </div>
	                </div>
	            </div>
            @endforeach

        </div>
    </div>
</section>

@endsection