@extends('site.layouts.app')
@section('title', $post->title . ' | ' . config('site.name'))
@section('description', Str::limit($post->description, 160))

@section('content')
<section class="page-hero"><div class="container"><h1>{{ $post->title }}</h1><nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="{{ route('site.home') }}">الرئيسية</a></li><li class="breadcrumb-item"><a href="{{ route('site.blog.index') }}">المدونة</a></li><li class="breadcrumb-item active">{{ Str::limit($post->title, 40) }}</li></ol></nav></div></section>
<section class="section-padding"><div class="container"><div class="row g-5">
    <div class="col-lg-8">
        <img src="{{ $post->image_url }}" alt="{{ $post->title }}" class="img-fluid rounded-4 mb-4 w-100">
        <div class="blog-meta mb-3">
            <span class="badge bg-secondary">{{ $post->category }}</span>
            <small class="text-muted ms-2">{{ optional($post->published_at)->format('Y-m-d') }}</small>
        </div>
        <div class="blog-content">{!! $post->body !!}</div>
    </div>
    <div class="col-lg-4">
        @if($related->count())
            <h5 class="mb-3">مقالات ذات صلة</h5>
            @foreach($related as $item)
                <div class="mb-3"><a href="{{ route('site.blog.show', $item) }}" class="text-decoration-none text-dark fw-bold">{{ $item->title }}</a><br><small class="text-muted">{{ optional($item->published_at)->format('Y-m-d') }}</small></div>
            @endforeach
        @endif
    </div>
</div></div></section>
@endsection