@extends('layouts.app')

@section('content')
    <div class="container mx-auto mt-10">
        <div class="grid grid-cols-1 md:grid-cols-12 gap-6">
            <div class="md:col-span-9">
                <!-- Article Content -->
                <div class="ml-4 mb-10 ">
                    {{ Breadcrumbs::render('article.show', $article) }}
                    <h1 class="text-3xl font-bold mb-4">{{ $article->title }}</h1>
                    <p class="text-gray-500 mb-2">
                        {{ __('messages.published_on: :date', ['date' => $article->created_at->format('d M Y')]) }}
                    </p>
                    <p class="mb-4">
                        <strong>{{ __('messages.category') }}:</strong>
                        {{ $article->category->name ?? __('Not specified') }}
                    </p>
                </div>

                <div class=" mx-auto m-4 sm:m-4">

                    <img src="{{ $article->getImageUrl() }}" class="w-full h-[350px] rounded-lg mb-6"
                        alt="{{ $article->title }}">
                    <div class="prose max-w-none">{!! $article->content !!}</div>
                    <a href="{{ route('articles.index') }}"
                        class="inline-block mt-6 bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600 transition">
                        {{ __('messages.back_to_article') }}
                    </a>
                </div>
            </div>

            <!-- Sidebar (Right Column) -->
            <div class="md:col-span-3">
                @include('partials.sidebar')
            </div>
        </div>
    </div>


@endsection