{{-- ...entête HTML, styles, etc... --}}
@extends('layouts.app') {{-- Assurez-vous d'avoir un layout de base --}}

@section('title', $post->title)

@section('content')
<main>
    <!-- Image de l'article -->
    <div class="w-full h-64 md:h-96 bg-cover bg-center" style="background-image: url('{{ $post->image_url ?? 'https://via.placeholder.com/1200x400' }}');">
        <div class="flex items-center justify-center h-full w-full bg-gray-900 bg-opacity-50">
            <div class="text-center">
                <h1 class="text-white text-3xl md:text-5xl font-extrabold">{{ $post->title }}</h1>
            </div>
        </div>
    </div>

    <!-- Contenu de l'article et sidebar -->
    <div class="container mx-auto max-w-6xl px-4 my-12">
        <div class="grid grid-cols-1 lg:grid-cols-4 gap-12">
            
            <!-- Contenu principal -->
            <div class="lg:col-span-3">
                <div class="bg-white rounded-xl shadow-lg p-6 md:p-8">
                    <!-- Meta-informations -->
                    <div class="flex items-center gap-4 mb-6 text-sm text-slate-500">
                        <img src="{{ $post->author->profile_photo_url ?? 'https://i.pravatar.cc/40?u=' . $post->author->id }}" alt="{{ $post->author->name }}" class="w-12 h-12 rounded-full bg-slate-200">
                        <div>
                            <span class="font-bold text-slate-800">{{ $post->author->name }}</span>
                            <div class="flex items-center gap-2">
                                <span>{{ $post->created_at->translatedFormat('j F Y') }}</span>
                                <span class="mx-1.5">·</span>
                                @if($post->categories->isNotEmpty())
                                    <a href="{{ route('articles', ['category_id' => $post->categories->first()->id]) }}" class="text-indigo-600 hover:underline">{{ $post->categories->first()->name }}</a>
                                @endif
                            </div>
                        </div>
                    </div>

                    <!-- Contenu de l'article (prose pour un style de lecture agréable) -->
                    <div class="prose prose-lg max-w-none prose-slate">
                        {!! $post->content !!}
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <aside class="lg:col-span-1 space-y-8">
                <!-- Articles récents -->
                <div class="bg-white rounded-xl shadow p-5">
                    <h3 class="text-lg font-bold mb-4 border-b pb-2">Articles récents</h3>
                    <ul class="space-y-4">
                        @forelse($recentPosts as $recent)
                            <li>
                                <a href="{{ route('articles.show', $recent->slug) }}" class="flex items-center gap-3 group">
                                    <img src="{{ $recent->image_url ?? 'https://via.placeholder.com/80x80' }}" alt="{{ $recent->title }}" class="w-16 h-16 object-cover rounded-lg flex-shrink-0">
                                    <div>
                                        <h4 class="font-semibold text-slate-800 group-hover:text-indigo-600 transition">{{ $recent->title }}</h4>
                                        <div class="text-xs text-slate-500">{{ $recent->created_at->translatedFormat('j M Y') }}</div>
                                    </div>
                                </a>
                            </li>
                        @empty
                            <li>Aucun autre article à afficher.</li>
                        @endforelse
                    </ul>
                </div>
            </aside>

        </div>
    </div>
</main>
@endsection
{{-- ...footer, scripts, etc... --}}