@extends('front.layouts.app')
@section('content')
    <main class="container">
        <nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E&#34;);"
            aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('front.home') }}">Home</a></li>

                @if (isset($category) && !is_null($category))
                    <li class="breadcrumb-item active" aria-current="page">{{ $category->name }}</li>
                @else
                    <li class="breadcrumb-item active" aria-current="page">Latest News</li>
                @endif
            </ol>
        </nav>
        <div class="row g-5">
            <div class="col-md-8">
                <h1 class="pb-2 fw-normal h2">
                    @if (isset($category) && !is_null($category))
                        {{ $category->name }} News from EchoScoop
                    @else
                        Latest News from EchoScoop
                    @endif
                </h1>
                @if ($posts->count() > 0)
                    @foreach ($posts as $post)
                        @include('front.partials.post_detail', ['post' => $post])
                    @endforeach
                    @if ($posts instanceof \Illuminate\Pagination\Paginator)
                        <div class="flex justify-center">
                            {{ $posts->links('pagination::simple-bootstrap-5-rounded') }}
                        </div>
                    @endif
                @else
                    <div class="py-3 text-center">
                        <div class="mb-2">No posts found yet.</div>
                        <div><a href="{{ route('front.home') }}">Back to Home</a></div>
                    </div>
                @endif
            </div>

            <div class="col-md-4">
                <div class="position-sticky" style="top: 2rem;">
                    @include('front.partials.about')
                </div>
            </div>
        </div>
    </main>
@endsection