@extends('layouts.master')

@section('content')
<div class="category-page">
    <div class="container">
        {{-- Breadcrumb --}}
        @component('components.breadcrumb', [
            'items' => [
                ['label' => $category->name_bn, 'url' => route('category.show', $category->slug)]
            ]
        ])
        @endcomponent
        
        {{-- Category Header --}}
        <header class="category-header">
            <h1 class="category-page-title">{{ $category->name_bn }}</h1>
            @if($category->description)
            <p class="category-description">{{ $category->description }}</p>
            @endif
        </header>
        
        {{-- Ad after header --}}
        @component('components.ad', ['placement' => 'category_top'])
        @endcomponent
        
        <div class="content-grid">
            {{-- Main Content --}}
            <div class="main-content">
                {{-- Featured Post --}}
                @if($featuredPost)
                <section class="category-featured">
                    @component('components.news-card-large', [
                        'post' => $featuredPost,
                        'size' => 'large',
                        'showExcerpt' => true,
                        'showCategory' => false,
                        'showDate' => true,
                    ])
                    @endcomponent
                </section>
                @endif
                
                {{-- Post Grid --}}
                <section class="category-posts">
                    <div class="posts-grid">
                        @forelse($posts as $post)
                        <div class="post-grid-item">
                            @component('components.news-card-large', [
                                'post' => $post,
                                'size' => 'medium',
                                'showExcerpt' => false,
                                'showCategory' => false,
                                'showDate' => true,
                            ])
                            @endcomponent
                        </div>
                        @empty
                        <div class="no-posts">
                            <p>কোনো পোস্ট পাওয়া যায়নি</p>
                        </div>
                        @endforelse
                    </div>
                </section>
                
                {{-- Pagination --}}
                <div class="pagination-wrapper">
                    {{ $posts->links('pagination::bootstrap-5') }}
                </div>
                
                {{-- Ad before related --}}
                @component('components.ad', ['placement' => 'in_article'])
                @endcomponent
                
                {{-- Related Posts --}}
                @if($relatedPosts->count() > 0)
                <section class="related-posts">
                    <h3 class="related-title">সম্পর্কিত খবর</h3>
                    <div class="related-grid">
                        @foreach($relatedPosts->take(4) as $post)
                        @component('components.news-card-small', [
                            'post' => $post,
                            'layout' => 'horizontal',
                            'showImage' => true,
                            'showCategory' => false,
                            'showDate' => true,
                        ])
                        @endcomponent
                        @endforeach
                    </div>
                </section>
                @endif
            </div>
            
            {{-- Sidebar --}}
            <div class="sidebar-container">
                @component('components.sidebar', ['sticky' => true])
                @endcomponent
            </div>
        </div>
    </div>
</div>
@endsection