@extends('public.layout.app') {{-- change to your front layout if different --}}
@section('title', $post->title)

@section('body')
@php
    $img = $post->cover_image ?? $post->thumbnail ?? $post->image ?? null; // change field names as needed
@endphp

<section class="section pt-5">
    <div class="container">

        {{-- Header --}}
        <div class="glass shadow-soft p-4 p-lg-5 mb-4">
            <div class="d-flex flex-wrap justify-content-between align-items-start gap-3">
                <div>
                    <a href="{{ route('front.posts.index') }}" class="btn btn-outline-light btn-sm mb-3">
                        <i class="fa-solid fa-arrow-left me-1"></i> {{ __('front.back_to_posts') }}
                    </a>

                    <div class="d-flex flex-wrap gap-2 mb-2">
                        <span class="badge-soft">
                            <i class="fa-regular fa-calendar me-1"></i>
                            {{ optional($post->created_at)->format('Y-m-d') }}
                        </span>
                        <span class="badge-soft">
                            <i class="fa-solid fa-link me-1"></i>
                            {{ $post->slug }}
                        </span>
                    </div>

                    <h2 class="fw-extrabold mb-0" style="letter-spacing:-.02em;">
                        {{ $post->title }}
                    </h2>

                    @if($post->excerpt)
                        <p class="text-muted2 mb-0 mt-2" style="max-width:900px;">
                            {{ $post->excerpt }}
                        </p>
                    @endif
                </div>

                <div class="text-end">
                    <a class="btn btn-info-soft" href="{{ route('front.posts.index') }}">
                        <i class="fa-solid fa-list me-1"></i> {{ __('front.all_posts') }}
                    </a>
                </div>
            </div>
        </div>

        <div class="row g-3">
            {{-- Content --}}
            <div class="col-lg-8">
                <div class="card-soft shadow-soft overflow-hidden">
                    @if($img)
                        <div class="thumb-wrap">
                            <img class="thumb-img" src="{{asset('storage/'. $img) }}" alt="{{ $post->title }}">
                        </div>
                    @endif

                    <div class="p-3 p-lg-4">
                        <h5 class="fw-bold mb-3">
                            <i class="fa-regular fa-file-lines me-1 text-muted2"></i>
                            {{ __('front.article') }}
                        </h5>

                        <div class="text-muted2" style="line-height:1.9;">
                            {!! $post->body ?? nl2br(e($post->content ?? '')) !!}
                        </div>
                    </div>
                </div>
            </div>

            {{-- Sidebar --}}
            <div class="col-lg-4">
                <div class="card-soft shadow-soft p-3 p-lg-4 mb-3">
                    <h6 class="fw-bold mb-3">
                        <i class="fa-regular fa-id-card me-1 text-muted2"></i> {{ __('front.post_info') }}
                    </h6>

                    <div class="d-flex justify-content-between py-1">
                        <span class="text-muted2">{{ __('front.published') }}</span>
                        <span class="fw-semibold">{{ optional($post->created_at)->format('Y-m-d') }}</span>
                    </div>

                    <div class="d-flex justify-content-between py-1">
                        <span class="text-muted2">{{ __('front.updated') }}</span>
                        <span class="fw-semibold">{{ optional($post->updated_at)->format('Y-m-d') }}</span>
                    </div>

                    <div class="d-flex justify-content-between py-1">
                        <span class="text-muted2">{{ __('front.slug') }}</span>
                        <span class="fw-semibold">{{ $post->slug }}</span>
                    </div>
                </div>

                <div class="glass shadow-soft p-3 p-lg-4">
                    <h6 class="fw-bold mb-2">
                        <i class="fa-solid fa-lightbulb me-1 text-muted2"></i> {{ __('front.tip') }}
                    </h6>
                    <p class="text-muted2 mb-0">
                        {{ __('front.use_search_in_posts_list_to_quickly_find_articles_by_ti') }}
                    </p>
                </div>
            </div>
        </div>

    </div>
</section>
@endsection