@props(['article'])

@php
    $fallbackImage = $article->featured_image
        ? asset('storage/' . $article->featured_image)
        : (\App\Services\Website\WebsiteSettings::for($websiteSchool)->defaultAsset('news_image'));
@endphp

<article class="ws-card group flex flex-col overflow-hidden">
    <a href="{{ tenant_url('public.news-article', [$websiteSchool->slug, $article->slug]) }}" class="block overflow-hidden">
        @if ($fallbackImage)
            <img src="{{ $fallbackImage }}" alt="{{ $article->title }}"
                 loading="lazy" class="h-48 w-full object-cover transition duration-500 group-hover:scale-105">
        @else
            <div class="flex h-48 w-full items-center justify-center bg-gradient-to-br from-slate-100 to-slate-200">
                <svg class="h-12 w-12 text-slate-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 01-2.25 2.25M16.5 7.5V18a2.25 2.25 0 002.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 002.25 2.25h13.5M6 7.5h3v3H6v-3z"/></svg>
            </div>
        @endif
    </a>
    <div class="flex flex-1 flex-col p-6">
        <div class="flex items-center gap-2 text-xs font-semibold text-slate-400">
            <span>{{ $article->published_at?->format('M j, Y') ?? $article->created_at->format('M j, Y') }}</span>
            @if ($article->category)
                <span class="rounded-full px-2.5 py-0.5 ws-accent-text" style="background: color-mix(in srgb, var(--ws-accent) 10%, transparent);">{{ $article->category }}</span>
            @endif
        </div>
        <h3 class="mt-2 font-ws-heading text-lg font-bold leading-snug text-slate-900">
            <a href="{{ tenant_url('public.news-article', [$websiteSchool->slug, $article->slug]) }}" class="hover:ws-primary-text">{{ $article->title }}</a>
        </h3>
        <p class="mt-2 line-clamp-3 text-sm leading-relaxed text-slate-500">{{ Str::limit(strip_tags($article->content), 130) }}</p>
        <a href="{{ tenant_url('public.news-article', [$websiteSchool->slug, $article->slug]) }}" class="mt-4 inline-flex items-center gap-1.5 pt-2 text-sm font-bold ws-primary-text">
            Read more
            <svg class="h-4 w-4 transition group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
        </a>
    </div>
</article>