@extends('rod.layouts.rod')

@section('content')

    <!-- Start Page Title Area -->
    <div class="page-title-area transparent-bg5">
        <div class="container">
            <div class="page-title-content text-start">
                <h2>Galéria</h2>
                <ul>
                    <li><a href="{{ url('/') }}">Kezdőlap</a></li>
                    <li><a href="{{ route('gallery.list') }}">Galériák</a></li>
                    <li>{{ $gallery->name }}</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- End Page Title Area -->


    <div class="blog-area pt-100">
        <div class="container">
            <div class="section-title">
                <span class="sub-title">Fotógyűjtemény a munkáinkról</span>
                <h2>{{ $gallery->name }}</h2>
            </div>
        </div>
    </div>

    @if ($gallery->description && $gallery->description != "<p><br></p>")
        <section class="blog-details-area pb-100">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-8 col-md-12">
                        <div class="blog-details-desc">

                            <div class="article-content">
                                {!! $gallery->description !!}
                                <div class="clearfix"></div>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </section>
    @endif


    <div class="gallery-area pb-70">
        <div class="container">
            <div class="row">

                @foreach($gallery->images as $image)
                    <div class="col-lg-4 col-md-6 col-sm-6">
                        <div class="single-gallery-item">
                            <img src="{{ $image->getUrl('thumbnail') }}" alt="image">
                            <a href="{{ $image->getUrl('large') }}" class="popup-image"><i class="fas fa-plus"></i></a>
                        </div>
                    </div>
                @endforeach

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

@endsection