@extends('layouts.app')

@section('content')
    <div class="container mx-auto mt-10">
        <div class="grid grid-cols-1 md:grid-cols-12 gap-6">
            <div class="md:col-span-9">
                <div class="ml-4 mb-10 mr-4">
                    {{ Breadcrumbs::render('article.category', $category) }}
                    <h1 class="text-3xl font-bold">{{ __('messages.categories') }}</h1>
                    <p class="text-gray-600 mt-3">{{ __('messages.blog_cat_description') }}</p>
                </div>
                <!-- Category Title -->
                <div class="mt-6 ml-2 mr-2">
                    <h1 class="text-2xl font-bold mb-6">{{ __('Articles in Category: :name', ['name' => $category->name]) }}
                    </h1>

                    <!-- Articles Grid -->
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        @forelse ($articles as $article)
                            <div class="bg-white rounded-lg shadow-md overflow-hidden">
                                <img src="{{ $article->getImageUrl() }}" class="w-full h-48 object-cover"
                                    alt="{{ $article->title }}">
                                <div class="p-4">
                                    <h5 class="text-xl font-semibold mb-2">{{ $article->title }}</h5>
                                    <p class="text-gray-600 mb-4">{{ Str::limit(strip_tags($article->content), 100) }}</p>
                                    <a href="{{ route('articles.show', $article->slug) }}"
                                        class="inline-block bgd-color text-white px-4 py-2 rounded  transition">
                                        {{ __('Read More') }}
                                    </a>
                                </div>
                            </div>
                        @empty
                            <p class="col-span-3 text-center text-gray-500">{{ __('No articles available in this category.') }}
                            </p>
                        @endforelse
                    </div>

                    <!-- Pagination -->
                    <div class="mt-8">
                        {{ $articles->links('pagination::tailwind') }}
                    </div>
                </div>
            </div>
            <!-- Sidebar (Right Column) -->
            <div class="md:col-span-3">
                @include('partials.sidebar')
            </div>
        </div>
    </div>


@endsection