{{-- Blog Card Component --}}
<div class="blog-card">
<div class="projectoffer" style="display: flex; flex-direction: column; width: 100%; height: 100%;">
    @if($blog->image)
    <div class="project-image blog-card-image-wrap mb-3">
        <a href="{{route('blog.detail', $blog->slug ?? $blog->uuid)}}">
            <img src="{{ $blog->image_thumb }}" alt="{{$blog->title}}" class="img-fluid blog-card-image" loading="lazy" decoding="async" width="400" height="318">
        </a>
    </div>
    @endif
    <a href="{{route('blog.detail', $blog->slug ?? $blog->uuid)}}" class="user-name">
        {{$blog->title}}
    </a>
    <div class="projectoffer-head">
        <div class="main-info">
            @if($blog->category)
            <div class="blog-category" style="font-size: 13px; color: #888;">
                <i class="fa fa-folder-open" style="margin-left: 5px;"></i>
                <a href="{{ route('blog.category', [$blog->category->id, $blog->category->slug]) }}" style="color: inherit; text-decoration: none;">
                    {{ $blog->category->name }}
                </a>
            </div>
            @endif
        </div>
        <div class="item">
            {{localized_friendly_time($blog->created_at)}}
        </div>
    </div>
    <div class="blog-stats" style="display: flex; gap: 15px; margin-top: 10px;">
        <span class="stat-item" style="display: flex; align-items: center; gap: 5px; font-size: 13px; color: #666;" title="المشاهدات">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                <circle cx="12" cy="12" r="3"></circle>
            </svg>
            {{ $blog->views_count ?? 0 }}
        </span>
    </div>
    <div class="offer-summary">
        <p> {!! \Illuminate\Support\Str::limit(strip_tags($blog->content), 150) !!} </p>
    </div>
</div>
</div>