@extends('components.layout')

@section('title', 'Latest News | ' . ($settings['site_name'] ?? 'LOCAL PULSE'))

@section('content')
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <h1 class="text-3xl font-bold text-gray-900 mb-2">Latest News</h1>
        <p class="text-sm text-gray-500 mb-6">Stories from Australia and around the world.</p>

        <div class="flex flex-wrap items-center gap-2 mb-6 pb-4 border-b border-gray-200">
            <a href="{{ route('latest') }}" class="px-3 py-1.5 text-xs font-semibold rounded-full {{ ($scope ?? 'all') === 'all' ? 'bg-gray-900 text-white' : 'bg-white border border-gray-200 text-gray-700 hover:border-gray-400' }}">All (Australia)</a>
            <a href="{{ route('latest', ['scope' => 'local']) }}" class="px-3 py-1.5 text-xs font-semibold rounded-full {{ ($scope ?? '') === 'local' ? 'bg-red-600 text-white' : 'bg-white border border-gray-200 text-gray-700 hover:border-red-400' }}">Local</a>
            <a href="{{ route('latest', ['scope' => 'international']) }}" class="px-3 py-1.5 text-xs font-semibold rounded-full {{ ($scope ?? '') === 'international' ? 'bg-blue-600 text-white' : 'bg-white border border-gray-200 text-gray-700 hover:border-blue-400' }}">International</a>
            <a href="{{ route('international') }}" class="ml-auto text-xs text-blue-600 font-semibold hover:underline">View all international →</a>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            @foreach($articles as $article)
                <x-article-card :article="$article" />
            @endforeach
        </div>

        <div class="mt-8">
            <x-pagination :paginator="$articles" />
        </div>
    </div>
@endsection