<a href="{{ route('news.show', $news->slug) }}" class="news-card">
    <div class="news-card-cover"
         style="background-image:
                linear-gradient(rgba(0,0,0,0.1), rgba(20,20,20,0.9)),
                url('{{ $news->gallery()->first() ? Storage::url($news->gallery()->first()->image) : '' }}')">
        @if($news->state !== 'published')
            <span class="news-card-state-badge">
                    @if($news->state === 'pending')
                    <i data-lucide="clock" size="11"></i> Pending
                @elseif($news->state === 'draft')
                    <i data-lucide="scissors" size="11"></i> Draft
                @elseif($news->state === 'hidden')
                    <i data-lucide="eye-off" size="11"></i> Hidden
                @endif
                </span>
        @endif
    </div>
    <div class="news-card-body">
        <h2 class="news-card-title">{{ $news->title }}</h2>
        @if($news->description)
            <p class="news-card-excerpt">
                {{ Str::limit(strip_tags($news->description), 100) }}
            </p>
        @endif
        <div class="news-card-meta">
            @if($news->user_id)
                <span><i data-lucide="user" size="12"></i>
                        <x-xf-username-link :user-id="$news->user_id"/>
                    </span>
            @endif
            <span><i data-lucide="calendar" size="12"></i>
                    {{ $news->created_at->format('M d, Y') }}
                </span>
            @if($news->gallery->isNotEmpty())
                <span><i data-lucide="images" size="12"></i>
                        {{ $news->gallery->count() }}
                    </span>
            @endif
        </div>
    </div>
</a>
