@if($mainPage->projects == 1)
<!--====== grid-menu portfolio ONE PART STARTS ======-->
<section class="st-gridmenu pb-100">
    <div class="container">
        <div class="row pb-3 pt-5 wow fadeInUp" data-wow-delay=".1s">
            <div class="col-lg-12">
                <div class="ud-section-title mb-4">
                    <span>{{ trans('front.projects.our_projects') }}</span>
                    <h2>{{ trans('front.projects.h2_title') }}</h2>
                    <p>{{ trans('front.projects.description') }}</p>
                </div>
                <div class="grid-menu text-center text-md-start">
                    <button data-filter="all" class="ud-rounded-btn ud-border-btn py-2 py-md-3 px-3 px-md-4 text-uppercase active">{{ trans('front.general.all') }}</button>
                @foreach($projectCategory->take(10) as $category)
                    @if($category->projects->count() > 0)
                        <button data-filter="{{ $category->slug }}" class="ud-rounded-btn ud-border-btn py-2 py-md-3 px-3 px-md-4 text-uppercase">{{ $category->title }}</button>
                    @endif
                @endforeach
                </div> <!-- portfolio menu -->
            </div>
        </div>
        <!-- row -->
        <div class="row filtr-container wow fadeInUp justify-content-sm-between justify-content-center" data-wow-delay=".15s">
        @foreach($projectCategory->take(10) as $category)
            @foreach($category->projects->take(10) as $project)
                <!-- card item -->
                <div class="filtr-item col-lg-3 col-md-4 col-sm-6 col-10" data-category="{{ $category->slug }}" data-sort="value">
                    <div class="grid-content card same-height">
                        <div class="grid-image ratio ratio-4x3">
                            <div class="card-img-overlay d-flex align-items-center justify-content-center h-100 w-100 portfolio-content">
                                <div class="grid-icon d-inline-block position-relative">
                                    <a class="stretched-link" href="{{ route('projects/project', ['projects' => trans('route.frontend.projects'), 'categorySlug' => $category->slug, 'slug' => $project->slug ]) }}">
                                        <i class="lni lni-link fw-bold"></i>
                                        <div class="gradient-mask-2"></div>
                                    </a>
                                </div>
                            </div>
                            @if($projectThumbImage = $project->getFirstMediaUrlTraitAttribute('cover', 'thumb_400x300'))
                                <img src="{{ $projectThumbImage }}" class="card-img-top" alt="{{ $project->slug }} card image">
                            @else
                                <img width="255" height="191" src="{{ fallbackImageUrl() }}" alt="no images">
                            @endif
                        </div>
                        <div class="card-body w-100 d-flex flex-column justify-content-between">
                            <h4 class="card-title st-card-title">{{ $project->title }}</h4>
                            <a class="stretched-link d-flex" href="{{ route('projects/project', ['projects' => trans('route.frontend.projects'), 'categorySlug' => $category->slug, 'slug' => $project->slug ]) }}">
                                <p class="card-text st-befor position-relative">{{ $category->title }}</p>
                            </a>
                        </div>
                    </div>
                </div>
            @endforeach
        @endforeach
        </div> <!-- row -->
    </div> <!-- container -->
</section>
<!--====== grid-menu portfolio ONE PART ENDS ======-->

@section('js')
    <!--====== FilterizR js (st-grid-menu) Start ======-->
    <script src="{{ asset('themes/smartblue/js/filterizr/jquery.filterizr.min.js') }}"></script>
    <script type="text/javascript">
        // Use Filterizr as a jQuery plugin
        $('.filtr-container').filterizr();

        //============== button active for grid-menu portfolio
        elements=document.querySelectorAll(".grid-menu button");
        for(var i=0; i<elements.length; i++){
            elements[i].onclick=function(){
                var el=elements[0];
                while(el){
                    if(el.tagName==="BUTTON"){
                        el.classList.remove("active");
                    }
                    el=el.nextSibling;
                }
                this.classList.add("active");
            };
        }
    </script>
    <!--====== FilterizR js (st-grid-menu) End ======-->

    <!-- Equal height js (same) ======-->
    <script src="{{ asset('themes/smartblue/js/sameElementsHeight.min.js') }}" charset="utf-8"></script>
    <script type="text/javascript">
        Utils.sameElementsHeight(".same-height");
    </script>
    <!-- Equal height js (same) ======-->
    @parent
@endsection

@endif