@extends('layouts.master')

@section('title', 'Todas as Notícias')

@section('content')

<div class="container pt-4">
    {{ Breadcrumbs::render('todas-noticias') }}
</div>
<div class="container py-0">
    
    <div class="text-center mb-5">
        <h1 class="display-5 fw-bold">Todas as Notícias</h1>
        <p class="lead text-muted">Fique por dentro de tudo o que acontece na Câmara Municipal.</p>
    </div>

    @if(isset($allNotices) && !$allNotices->isEmpty())
        {{-- Grid responsivo para os cards de notícia --}}
        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
            @foreach ($allNotices as $notice)
                <div class="col">
                    <div class="card h-100 shadow-sm">
                        <a href="{{ route('materia.show', $notice->id) }}">
                            @if($notice->image)
                                <img src="{{ asset('assets/notices/images/' . $notice->image) }}" 
                                     class="card-img-top" 
                                     alt="{{ $notice->title }}"
                                     style="height: 200px; object-fit: cover;">
                            @else
                                {{-- Imagem padrão caso a notícia não tenha uma --}}
                                <img src="https://placehold.co/600x400/E2E8F0/4A5568?text=Notícia" 
                                     class="card-img-top" 
                                     alt="{{ $notice->title }}"
                                     style="height: 200px; object-fit: cover;">
                            @endif
                        </a>
                        <div class="card-body d-flex flex-column">
                            <h5 class="card-title fw-bold">{{ Str::limit($notice->title, 60) }}</h5>
                            <p class="card-text text-muted small mb-4">
                                {{ \Carbon\Carbon::parse($notice->dateshow)->translatedFormat('d \d\e F \d\e Y') }}
                            </p>
                            <a href="{{ route('materia.show', $notice->id) }}" class="btn btn-primary mt-auto align-self-start">Leia Mais</a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        {{-- Links de Paginação --}}
        <div class="mt-5 d-flex justify-content-center">
            {{ $allNotices->links() }}
        </div>

    @else
        <div class="text-center py-5">
            <p class="lead">Nenhuma notícia encontrada no momento.</p>
        </div>
    @endif
</div>

@endsection