@forelse($blogs as $blog)
@php
    if($blog->visibility != 'Pu'){
        $blog_visibility = $blog->visibility == 'Pr' ? __('Private: ') : __('Protected: ') ;
    }else {
        $blog_visibility = '';
    }
    $blog_title = ($post_title_length_type == 'on_words') ? Str::words($blog->title, $post_title_length, ' ...') : Str::limit($blog->title, $post_title_length, ' ...');
    $blog_category = optional($blog)->blog_categories->pluck('slug')->toArray();
@endphp
<div class="col-span-12">
    <div class="md:flex gap-40 pb-21 border-b dark:border-white/15 border-black/15 dz-hover-item">
        <div class="md:w-[35%] w-full max-md:mb-20 relative">
            <a href="{{DzHelper::laraBlogLink($blog->id)}}" class="dz-hover-img right" data-displacement="{{ theme_asset('images/effect/3.jpg') }}" data-intensity="0.6" data-speedin="1" data-speedout="1">
                <img class="rounded-2lg size-full object-cover" src="{{ DzHelper::getStorageImage('storage/blog-images/'.@$blog->feature_img->value) }}" alt="img">
            </a>
        </div>
        <div class="md:w-[70%] w-full flex flex-col md:py-20">
            <div class="flex items-center flex-wrap justify-between">
                <div class="flex flex-wrap gap-8">
                    @foreach ($blog_category as $cat)
                    @php
                        $title = Str::title(str_replace('-', ' ', $cat));
                    @endphp
                    <a href="javascript:void(0);" class="bg-primary font-normal text-black p-10 text-sm rounded-md h-30 flex items-center justify-center">{{ $title }}</a>
                    @endforeach
                </div>
                <a href="" class="dark:bg-white/10 bg-black/10 font-normal text-white p-10 text-sm rounded-md h-30 flex items-center justify-center">{{ Carbon\Carbon::parse($blog->publish_on)->format(config('Site.custom_date_format')) }}</a>
            </div>
            <h2 class="dark:text-white sm:text-2xxl/40 text-2xl font-normal mb-30 mt-22 max-w-614">{{ $blog_visibility }}{{ $blog_title }}</h2>
            <div class="flex items-center justify-between mt-auto">
                <div class="flex items-center gap-10">
                    <img class="size-40 rounded-4xl" src="{{ HelpDesk::user_img($blog->user->profile) }}" alt="img">
                    <h5 class="text-base dark:text-white/50 font-normal">By <span class="text-primary">{{ $blog->user->name }}</span></h5>
                </div> 
                <a href="{{DzHelper::laraBlogLink($blog->id)}}" class="size-50 flex items-center justify-center rounded-full bg-primary overflow-hidden group/second">
                    <svg class="group-hover/second:animate-toTopFromBottom size-24" width="41" height="41" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12.2344 12.2344H28.6406V28.6406" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M12.2344 28.6406L28.6406 12.2344" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </a>
            </div>	
        </div>
    </div>
</div>

@empty
<div class="col-span-12 py-20 text-center dark:text-white text-xl"><strong>{{ __('No blogs found.') }}</strong></div>
@endforelse