@extends('layouts.shell')
@section('title', 'Artikel')
@section('meta_description', 'Kumpulan artikel & kajian tulis Islami dari Quran Review: tafsir, fiqih, sirah, dan inspirasi harian.')
@section('main-pad', 'px-5 pb-6')

@section('content')
<header class="mb-7">
    <span class="chip-primary mb-2"><x-icon name="book" class="w-3.5 h-3.5"/> Artikel</span>
    <h1 class="text-h1">Artikel & Kajian Tulis</h1>
    <p class="text-body text-muted mt-1 prose-body">Bacaan Islami terkurasi untuk menemani hari Anda.</p>
</header>

@if($featured)
{{-- Featured --}}
<a href="{{ route('articles.show', $featured->slug) }}" class="card overflow-hidden block mb-8 group">
    <div class="cinema relative aspect-[16/9] overflow-hidden">
        <img src="{{ $featured->coverUrl() }}" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" alt="">
        <div class="absolute inset-0 bg-gradient-to-t from-black/85 via-black/20 to-transparent"></div>
        <div class="absolute inset-x-0 bottom-0 p-5">
            @if($featured->category)<span class="chip !bg-white/15 !text-white mb-2">{{ $featured->category }}</span>@endif
            <h2 class="text-h2 text-white leading-tight">{{ $featured->title }}</h2>
            <p class="text-small text-white/70 mt-1">{{ $featured->readingMinutes() }} mnt baca · {{ $featured->published_at?->translatedFormat('d M Y') }}</p>
        </div>
    </div>
</a>
@endif

<div class="grid gap-5 sm:grid-cols-2">
    @forelse($articles as $article)
    @continue($featured && $article->id === $featured->id)
    <a href="{{ route('articles.show', $article->slug) }}" class="card overflow-hidden group">
        <div class="aspect-[16/9] overflow-hidden bg-surface-2">
            <img src="{{ $article->coverUrl() }}" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" alt="">
        </div>
        <div class="p-4">
            @if($article->category)<span class="text-caption text-primary font-semibold">{{ $article->category }}</span>@endif
            <h3 class="text-h4 mt-1 leading-tight line-clamp-2">{{ $article->title }}</h3>
            <p class="text-small text-muted mt-1.5 line-clamp-2">{{ $article->excerpt }}</p>
            <p class="text-caption text-muted mt-2">{{ $article->readingMinutes() }} mnt · {{ $article->published_at?->translatedFormat('d M Y') }}</p>
        </div>
    </a>
    @empty
    <div class="card col-span-full p-10 text-center">
        <x-icon name="book" class="mx-auto mb-2 w-10 h-10 text-muted"/>
        <p class="text-body text-muted">Belum ada artikel.</p>
    </div>
    @endforelse
</div>

<div class="mt-7">{{ $articles->links() }}</div>
@endsection