@extends('layouts.admin')

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

@section('content')
    <div class="mb-6 flex justify-between items-center">
        <h1 class="text-3xl font-bold text-gray-900">Article Details</h1>
        <div class="space-x-2">
            <a href="{{ route('admin.articles.edit', $article) }}" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">Edit</a>
            <a href="{{ route('admin.articles.index') }}" class="bg-gray-300 hover:bg-gray-400 text-gray-800 px-4 py-2 rounded-md text-sm font-medium">Back</a>
        </div>
    </div>

    <div class="bg-white shadow rounded-lg p-6">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <h3 class="text-sm font-medium text-gray-500">Title</h3>
                <p class="mt-1 text-sm text-gray-900">{{ $article->title }}</p>
            </div>
            <div>
                <h3 class="text-sm font-medium text-gray-500">Status</h3>
                <p class="mt-1 text-sm text-gray-900">{{ ucfirst($article->status) }}</p>
            </div>
            <div>
                <h3 class="text-sm font-medium text-gray-500">Category</h3>
                <p class="mt-1 text-sm text-gray-900">{{ $article->category->name ?? 'N/A' }}</p>
            </div>
            <div>
                <h3 class="text-sm font-medium text-gray-500">Author</h3>
                <p class="mt-1 text-sm text-gray-900">{{ $article->author->name ?? 'N/A' }}</p>
            </div>
            <div>
                <h3 class="text-sm font-medium text-gray-500">Published At</h3>
                <p class="mt-1 text-sm text-gray-900">{{ $article->published_at?->format('M d, Y H:i') ?? 'N/A' }}</p>
            </div>
            <div>
                <h3 class="text-sm font-medium text-gray-500">Views</h3>
                <p class="mt-1 text-sm text-gray-900">{{ $article->view_count }}</p>
            </div>
            <div>
                <h3 class="text-sm font-medium text-gray-500">Featured</h3>
                <p class="mt-1 text-sm text-gray-900">{{ $article->is_featured ? 'Yes' : 'No' }}</p>
            </div>
            <div>
                <h3 class="text-sm font-medium text-gray-500">Breaking</h3>
                <p class="mt-1 text-sm text-gray-900">{{ $article->is_breaking ? 'Yes' : 'No' }}</p>
            </div>
            <div class="md:col-span-2">
                <h3 class="text-sm font-medium text-gray-500">Excerpt</h3>
                <p class="mt-1 text-sm text-gray-900">{{ $article->excerpt }}</p>
            </div>
            <div class="md:col-span-2">
                <h3 class="text-sm font-medium text-gray-500">Body</h3>
                <div class="mt-1 text-sm text-gray-900 prose max-w-none">{!! nl2br(e($article->body)) !!}</div>
            </div>
        </div>
    </div>
@endsection