@extends('layouts.public')

@section('title', $title.' | '.$site['name'])

@section('content')
    @php
        $items = collect($articles->items());
        $lead = $items->first();
        $sideItems = $items->skip(1)->take(2);
        $listItems = $items->skip(3);
    @endphp

    <section id="category_content" class="container category-page">
        <div class="breadcrumb-menu">
            <a href="{{ route('home') }}">প্রচ্ছদ</a>
            <span>/</span>
            <strong>{{ $title }}</strong>
        </div>

        <div class="category-layout">
            <div class="common-border-box">
                <h1 class="details-category-title" style="--cat-color: {{ $currentCategory->color ?? '#f90' }}">{{ $title }}</h1>

                @if($lead)
                    <div class="category-lead-grid">
                        <article class="cat-lead">
                            <a href="{{ route('article.show', $lead) }}">
                                <div class="imgWrep">
                                    @if($lead->image_path)
                                        <img src="{{ asset('storage/'.$lead->image_path) }}" alt="{{ $lead->title }}">
                                    @endif
                                    <h2 class="overlay-headline">{{ $lead->title }}</h2>
                                </div>
                            </a>
                            @if($lead->excerpt)
                                <p>{{ $lead->excerpt }}</p>
                            @endif
                        </article>

                        <div class="category-side-grid">
                            @foreach($sideItems as $article)
                                <article class="category-side-card">
                                    <a href="{{ route('article.show', $article) }}">
                                        @if($article->image_path)
                                            <img src="{{ asset('storage/'.$article->image_path) }}" alt="{{ $article->title }}">
                                        @endif
                                        <h2>{{ $article->title }}</h2>
                                    </a>
                                </article>
                            @endforeach
                        </div>
                    </div>
                @endif

                <div class="category-list-grid">
                    @forelse($listItems as $article)
                        <article class="category-list-card">
                            <a href="{{ route('article.show', $article) }}">
                                @if($article->image_path)
                                    <img src="{{ asset('storage/'.$article->image_path) }}" alt="{{ $article->title }}">
                                @endif
                                <div>
                                    <h2>{{ $article->title }}</h2>
                                    @if($article->excerpt)
                                        <p>{{ $article->excerpt }}</p>
                                    @endif
                                    <time>{{ optional($article->published_at)->format('d M Y, h:i A') }}</time>
                                </div>
                            </a>
                        </article>
                    @empty
                        @unless($lead)
                            <p class="empty">কোনো সংবাদ পাওয়া যায়নি।</p>
                        @endunless
                    @endforelse
                </div>

                {{ $articles->links() }}
            </div>

            @include('public._sidebar')
        </div>
    </section>
@endsection