@props(['article'])

<a href="{{ route('articles.show', ['locale' => app()->getLocale(), 'article' => $article->slug]) }}"
   data-reveal
   class="card group flex flex-col overflow-hidden transition-transform hover:-translate-y-1"
   {{ $attributes }}>
    <div class="flex h-44 items-center justify-center overflow-hidden bg-brand-green-100">
        @if ($article->coverImageUrl())
            <img src="{{ $article->coverImageUrl() }}" alt="{{ $article->title }}" class="h-full w-full object-cover transition duration-500 group-hover:scale-105">
        @else
            <span class="text-4xl">📖</span>
        @endif
    </div>
    <div class="flex flex-1 flex-col p-5">
        @if ($article->published_at)
            <span class="text-xs font-semibold uppercase tracking-wide text-brand-ink/40">
                {{ __('site.article_published_on') }} {{ $article->published_at->translatedFormat('d M Y') }}
            </span>
        @endif
        <h3 class="mt-1.5 text-base font-bold text-brand-ink group-hover:text-brand-green-800">{{ $article->title }}</h3>
        @if ($article->excerpt)
            <p class="mt-1.5 line-clamp-3 text-sm text-brand-ink/60">{{ $article->excerpt }}</p>
        @endif
        <span class="mt-4 inline-flex items-center gap-1 text-sm font-semibold text-brand-green-800">
            {{ __('site.btn_read_more') }}
            <svg class="h-4 w-4 transition group-hover:translate-x-1" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M12.293 4.293a1 1 0 011.414 0l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414-1.414L15.586 11H4a1 1 0 110-2h11.586l-3.293-3.293a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
        </span>
    </div>
</a>