@extends('frontend.main_master')

@section('title', 'Blog | ' . t('site-title'))
@section('meta_description', 'Astro Bilge blog yazılarını keşfedin. Astroloji, doğum haritası, burçlar ve gezegenler hakkında güncel içerikler.')
@section('meta_keywords', 'astroloji blog, doğum haritası blog, burç yazıları, astro bilge blog')

@push('schema')
<x-seo.schema-breadcrumb :items="[['name' => 'Anasayfa', 'url' => route('index')], ['name' => 'Blog', 'url' => route('blog.index')]]" />
@endpush

@push('styles')
<link rel="stylesheet" href="{{ asset('frontend/css/page-home.css') }}">
<link rel="stylesheet" href="{{ asset('frontend/css/blog-page.css') }}">
@endpush

@section('content')
<div class="blog-page py-5">
    <div class="container">
        <div class="blog-hero text-center mb-5">
            <h1 class="blog-title">Astro Bilge Blog</h1>
            <p class="blog-subtitle mb-0">Astrolojiye dair güncel yazılar, yorumlar ve derinlemesine rehberler.</p>
        </div>

        @if ($blogs->count() > 0)
            <div class="row g-4">
                @foreach ($blogs as $blog)
                    <div class="col-12 col-md-6 col-xl-4">
                        <article class="blog-card h-100">
                            <a href="{{ route('blog.show', $blog) }}" class="blog-card-image-link" aria-label="{{ $blog->title }}">
                                @if (!empty($blog->image))
                                    <img src="{{ asset($blog->image) }}" alt="{{ $blog->title }}" class="blog-card-image">
                                @else
                                    <div class="blog-card-image blog-card-image-placeholder">Astro Bilge</div>
                                @endif
                            </a>

                            <div class="blog-card-body">
                                <div class="blog-meta d-flex flex-wrap align-items-center gap-2 mb-2">
                                    <span class="blog-date">{{ optional($blog->created_at)->translatedFormat('d M Y') }}</span>
                                    @if ($blog->category)
                                        <span class="blog-category">{{ $blog->category->name }}</span>
                                    @endif
                                </div>

                                <h2 class="blog-card-title">
                                    <a href="{{ route('blog.show', $blog) }}">{{ $blog->title }}</a>
                                </h2>

                                <p class="blog-card-excerpt">
                                    {{ \Illuminate\Support\Str::limit(strip_tags((string) $blog->content), 170) }}
                                </p>

                                <a href="{{ route('blog.show', $blog) }}" class="blog-read-more">Devamını Oku</a>
                            </div>
                        </article>
                    </div>
                @endforeach
            </div>

            <div class="d-flex justify-content-center mt-5">
                {{ $blogs->links('pagination::bootstrap-5') }}
            </div>
        @else
            <div class="blog-empty text-center py-5">
                <h2 class="h4 mb-3">Henüz yayınlanmış blog yazısı yok</h2>
                <p class="text-muted mb-0">Yeni içerikler çok yakında burada olacak.</p>
            </div>
        @endif
    </div>
</div>
@endsection