
@forelse($blogs as $blog)

    @php
        $classes = '';
   
        if ((($args['sidebar'] ?? null) == '1' && $show_sidebar == '1') || (!empty($related_blog) && $related_blog === true)) {
            $classes = 'md:col-span-6 col-span-12';
        } else {
            if ($layout != 'sidebar_full') {
                $classes = 'md:col-span-6 col-span-12';
            }else{
                $classes = 'lg:col-span-4 md:col-span-6 col-span-12';
            }
        }
    @endphp

    <div class="{{ $classes }} sm:mb-40 mb-20">
        @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, ' ...');
        @endphp
 
        <div class="group blog-card">
            <div class="sm:mb-30 mb-20 overflow-hidden">
                <img src="{{ DzHelper::getStorageImage('storage/blog-images/'.@$blog->feature_img->value) }}" alt="" class="w-full duration-500 group-hover:scale-[1.03] group-hover:translate-x-3">
            </div>
            <div class="flex items-center justify-between">
                <div class="">
                    <h4 class="text-2xxl/35 mb-5">
                        <a class="hover:text-primary" href="{{DzHelper::laraBlogLink($blog->id)}}">
                            {{ $blog_visibility }}{{ $blog_title }}
                        </a>
                    </h4>
                    <ul>
                        @if(!empty($date_on))
                        <li class="text-base/16 dark:text-bodytext text-textlight pe-10 inline-block relative before:content-[''] before:absolute before:h-1 before:w-10 before:left-0 before:top-1/2 before:-translate-y-1/2 first:before:hidden dark:before:bg-bodytext before:bg-textlight">{{ Carbon\Carbon::parse($blog->publish_on)->format(config('Site.custom_date_format')) }}</li>
                        @endif
                        <li class="text-base/16 dark:text-bodytext text-textlight ps-20 inline-block relative before:content-[''] before:absolute before:h-1 before:w-10 before:left-0 before:top-1/2 before:-translate-y-1/2 first:before:hidden dark:before:bg-bodytext before:bg-textlight">By <a href="{{ DzHelper::author($blog->user->id) }}">{{ $blog->user->full_name }}</a></li>
                    </ul>
                </div>
                <a href="{{DzHelper::laraBlogLink($blog->id)}}" class="size-60 min-w-60 flex items-center justify-center rounded-full dark:bg-white bg-dark transform xl:-translate-x-full xl:rotate-[-360deg] xl:opacity-0 group-hover:translate-x-0 group-hover:rotate-0 group-hover:opacity-100 overflow-hidden group/second">
                    <svg class="group-hover/second:animate-toTopFromBottom" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path class="dark:stroke-black stroke-white" d="M7.5 17L17.5 7" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path class="dark:stroke-black stroke-white" d="M7.5 7H17.5V17" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </a>
            </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
