@extends('themes.schumann.layout.layout')
@section('title', trans('site.gallery'))
@section('bodyClass', 'gallery-page')
@section('content')
<div class="gallery-wrapper">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="headline">
                    <div class="title">
                        {{ trans('site.gallery') }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="gallery-items">
      @if(count($items))
    	<div class="infinite-scroll">
    	@php
    		$first = $items->first();
    		$items->shift();
        $img = 'themes/schumann/img/noimg.png';
        if($first->img) {
            $img = 'uploads/'.$first->img;
        }
    	@endphp
        <a href="{{ Route('gallery.show', [
                     'id' => $first->id,
                     'title' => str_slug($first->translate->title, '-'),
                    ]) }}" class="gallery-item">
          <div class="gallery-img" style="background-image: url('{{ asset($img) }}')">
            <div class="overlay"></div>
            <div class="see-more">
              {{ trans('site.read_more') }}
           </div>
          </div>
          <h4 class="gallery-title">{{ $first->translate->title }}</h4>
        </a>
    	@foreach($items->chunk(2) as $key => $_items)
	    	@foreach($_items as $_key => $item)
        @php
          $img = 'themes/schumann/img/noimg.png';
          if($item->img) {
              $img = 'uploads/'.$item->img;
          }
        @endphp
            <a href="{{ Route('gallery.show', [
                     'id' => $item->id,
                     'title' => str_slug($item->translate->title, '-'),
                    ]) }}" class="gallery-item">
          <div class="gallery-img" style="background-image: url('{{ asset($img) }}')">
            <div class="overlay"></div>
            <div class="see-more">
              {{ trans('site.read_more') }}
           </div>
          </div>
          <h4 class="gallery-title">
            @if($key % 2 != 0)
                {{ $item->translate->title }}
            @else
                {{ $item->translate->title }}
            @endif
            </h4>
        </a>
	        @endforeach
	    @endforeach

	    {{ $items->links() }}
    </div>
    @endif
    </div>
</div>
@endsection
@section('js')
<script type="text/javascript">
    $('.pagination').hide();
    $(function() {
        $('.infinite-scroll').jscroll({
            autoTrigger: true,
            loadingHtml: '<div class="loading-content"><span class="loading-icon"></span></div>',
            padding: 0,
            nextSelector: '.pagination li.active + li a',
            contentSelector: 'div.infinite-scroll',
            callback: function() {
                $('.pagination').remove();
            }
        });
    });
</script>
@endsection