@extends('admin.layouts.app')

@section('title', $news->title)
@section('header-title', 'News Details')

@section('content')
<div class="card">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
        <div class="card-title" style="margin: 0;">{{ $news->title }}</div>
        <div style="display: flex; gap: 8px;">
            <a href="{{ route('admin.news.edit', $news) }}" class="btn btn-primary btn-sm">Edit</a>
            <form action="{{ route('admin.news.destroy', $news) }}" method="POST" style="display:inline;" onsubmit="return confirm('Delete this news?');">
                @csrf @method('DELETE')
                <button type="submit" class="btn btn-danger btn-sm">Delete</button>
            </form>
        </div>
    </div>

    <div style="display: grid; gap: 20px;">
        @if($news->featured_image)
        <div>
            <div class="form-label">Featured Image</div>
            <img src="{{ asset('storage/' . $news->featured_image) }}" alt="{{ $news->title }}" style="max-width: 100%; max-height: 400px; border-radius: 8px; border: 1px solid var(--border);">
        </div>
        @endif

        <div>
            <div class="form-label">Description</div>
            <div class="news-content" style="padding: 16px; background: rgba(255,255,255,.03); border-radius: 8px; line-height: 1.6;">
                {!! $news->description !!}
            </div>
        </div>

        <div style="display: flex; gap: 16px; font-size: 12px; color: var(--text-muted);">
            <span>Created by: {{ $news->creator?->name ?? '-' }}</span>
            <span>{{ $news->created_at->format('d M Y H:i') }}</span>
        </div>
    </div>

    <div style="margin-top: 20px;">
        <a href="{{ route('admin.news.index') }}" class="btn btn-secondary">← Back to News</a>
    </div>
</div>

@push('styles')
<style>
.news-content p { margin-bottom: 12px; }
.news-content ul, .news-content ol { margin: 12px 0; padding-left: 24px; }
.news-content a { color: var(--accent); }
.news-content h1, .news-content h2, .news-content h3 { margin: 16px 0 8px; }
</style>
@endpush
@endsection