@extends('front.layouts.master')
@section('css')
    <link href="/front/css/lightgallery.css" rel="stylesheet">
@endsection
@section('content')
    <div class="clearfix"></div>
    <section class="container mt-4 mb-2">
        <div class="row p-0">
            <div class="col-12 p-0">
                <div class="breadcrumb radius15 shadow-sm">
                    <ul>
                        <li><a href="/">صفحه اصلی / </a></li>
                        <li><a href="#" class="current">{{ $title }}</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    @if (count($cats))
                <div class="row pt-4 portfoio3">
                    @foreach ($cats as $item)
                        <div class="col-xl-3 col-md-6 mb-4">
                            <a href="{{ route('gallery', $item->slug) }}" class="grid">
                                <figure class="effect-zoe shadow">
                                    <img src="{{ $item->pic }}" alt="{{ $item->name }}" />
                                    <figcaption>
                                        <h2>{{ $item->name }}</h2>
                                        <i class="fal fa-eye p-2"></i>
                                    </figcaption>
                                </figure>
                            </a>
                        </div> 
                    @endforeach
                </div>
            @endif
@endsection
@section('js-page')
    <script type="text/javascript">
        $(document).ready(function() {
            $('#lightgallery').lightGallery();
        });
    </script>

    <script src="/front/js/picturefill.min.js"></script>
    <script src="/front/js/lightgallery.js"></script>
    <script src="/front/js/jquery.mousewheel.min.js"></script>
@endsection