@include('front.layouts.head')
<!-- TOP TITLE -->
<section class="topSingleBkg topPageBkg topSingleBkgImg">
    <div class="item-img" style="background-image: url('{{ asset($banner ? 'storage/' . $banner : 'front/images/about-banner.jpg') }}');"></div>
    <div class="inner-desc">
        <h1 class="post-title single-post-title">Portföy</h1>
        <span class="post-subtitle">{{ $mainTitle }}</span>
    </div>
</section>
<!-- /TOP TITLE -->
<!-- CONTENT SECTION -->
<section id="wrap-content" class="page-content">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="portfolio-masonry-container">
                    {!! $mainText !!}
                    <div class="portfolio-masonry portfolio-layout-masonry margin-t24">
                        @foreach ($portfolios as $portfolio)
                        <div class="item-portfolio item-3cols wedding">
                            <a class="cursor-eye" href="{{ route('front.portfolio_details', $portfolio->slug) }}">
                                <div class="post-image item-grid-image">
                                    <img loading="lazy" src="{{ asset('storage/' . $portfolio->cover) }}" class="img-fluid" alt="{{ $portfolio->name }}">
                                    <div class="gradient-overlay"></div>
                                </div>
                                <div class="item-text-holder">
                                    <h2 class="article-title display-6">
                                        <a href="{{ route('front.portfolio_details', $portfolio->slug) }}">{{ $portfolio->name }}</a>
                                    </h2>
                                </div>
                            </a>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        <!--row-->
    </div>
    <!--container-->
</section>
<!-- /CONTENT SECTION -->
@push('style')
<style>

</style>
@endpush
@push('script')
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<script>
    $(document).ready(function () {
        var $grid = $('.portfolio-masonry');

        $grid.imagesLoaded(function () {
            var $portfolioItems = $('.portfolio-layout-masonry');

            $portfolioItems.isotope({
                itemSelector: '.item-portfolio',
                layoutMode: 'masonry',
            });
        });
    });
</script>
@endpush

@include('front.layouts.footer')