@extends('themes.schumann.layout.layout')
@section('title', $item->translate->title)
@section('description', $item->translate->description)
@section('keywords', $item->translate->keywords)
@section('img', asset('uploads/'.$item->img))
@section('bodyClass', 'galleryDetail-page')
@section('content')
<div class="galleryDetail-wrapper">
    <div class="bg-box"></div>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="headline">
                    <div class="title">
                        {{ $item->translate->title }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="galleryDetail-content">
        <a href="{{ Route('gallery.index') }}" class="goBack"><span class="arrow-left"></span> {{ trans('site.go_back') }}</a>
        <div class="date">
            {{ Carbon::parse($item->created_at)->format('d.m.y') }}
        </div>
        {!! $item->translate->content !!}
        @if(count($item->images))
        <div class="images mfp-with-zoom">
            @foreach($item->images as $img)
            <div class="img-item" href="{{ asset('uploads/'.$img->img) }}" style="background-image: url('{{ asset('uploads/'.$img->img) }}')">
                <img src="{{ asset('uploads/'.$img->img) }}" alt="{{ $item->translate->title }}">
            </div>
            @endforeach
        </div>
        @endif
    </div>
</div>
@endsection
@section('js')
<script>
$(function() {

    $('body').magnificPopup({

        delegate: 'div.img-item',

        type: 'image',

        mainClass: 'mfp-with-zoom',

        gallery: {

            enabled: true

        }
    });

});
</script>
@endsection