@extends('layouts.app')

@section('title', $category->name . ' - The Daily Bursa')


@section('content')
        <!-- Page Title -->
        <div class="py-6">
            <h1 class="text-3xl font-bold text-center">{{ $category->name }} Kategorisi</h1>
        </div>

        <!-- News Content -->
        <div class="masonry-grid">
            @forelse($news as $item)
                <div class="masonry-item border-b border-black/50 dark:border-white/30 pb-4">
                    <h3 class="font-semibold text-lg mb-2 dark:text-gray-100">
                        @if($item->created_at >= $twoHoursAgo)
                        <span class="material-symbols-outlined text-sm text-yellow-500">
                            asterisk
                        </span>
                        @endif
                        {{ $item->ai_name }}
                    </h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">
                        {{ $item->ai_description }}
                    </p>
                    <div
                        class="flex items-center gap-x-2 text-xs text-gray-500 uppercase flex-wrap dark:text-gray-500">
                        <div class="flex gap-x-0.5 items-center text-xs dark:text-white/30 text-black/30">
                            <span class="material-symbols-outlined text-sm">
                                schedule
                            </span>
                            <span>{{ $item->created_at->format('H:i') }}</span>
                        </div>
                        @foreach($item->districts as $district)
                        <span>#{{ $district->name }}</span>
                        @endforeach
                        @foreach($item->categories as $cat)
                        <span>#{{ $cat->name }}</span>
                        @endforeach
                    </div>
                    @if ($item->status == 'published')
                    <div
                        class="flex items-center text-teal-600 dark:text-teal-400 gap-x-1.5 mt-1.5 text-xs news-note-item relative cursor-pointer">
                        <span class="material-symbols-outlined text-xs">
                            done_all
                        </span>
                        <p>Editör tarafından düzenlendi</p>
                    </div>
                    @else
                    <div
                        class="flex items-center text-violet-600 dark:text-violet-400 gap-x-1.5 mt-1.5 text-xs news-note-item relative cursor-pointer">
                        <span class="material-symbols-outlined text-xs">
                            auto_awesome
                        </span>
                        <p>Yapay zeka özetledi</p>
                    </div>
                    @endif
                    @if ($item->is_shared_social_media == 1)
                    <div
                        class="flex items-center text-rose-600 dark:text-rose-400 gap-x-1.5 mt-1.5 text-xs news-note-item relative cursor-pointer">
                        <span class="material-symbols-outlined text-xs">
                            favorite
                        </span>
                        <p>Sosyal medya hesaplarımızda yayınladı</p>
                    </div>
                    @endif
                </div>
            @empty
                <div class="masonry-item text-center py-8">
                    <p class="text-lg">Bu kategoriye ait hiç haber bulunamadı.</p>
                </div>
            @endforelse
        </div>

        <!-- Pagination -->
        <div class="mt-8">
            {{ $news->links() }}
        </div>
@endsection