@extends('layouts.public')
@section('title', $news->title)

@section('content')
@include('partials.page-header', ['title' => $news->title])

<section class="section">
    <div class="container">
        <div class="row g-5">
            <div class="col-lg-8">
                @if($news->image)
                    <img src="{{ image_url($news->image) }}" class="img-fluid rounded-4 mb-4" alt="{{ $news->title }}">
                @endif
                <div class="text-muted small mb-4">
                    <i class="bi bi-calendar3 me-1"></i> Publicado el {{ $news->published_at?->format('d/m/Y') }}
                </div>
                @if($news->excerpt)
                    <p class="lead fw-semibold">{{ $news->excerpt }}</p>
                @endif
                <div class="news-content text-muted" style="line-height:1.8;">
                    {!! $news->content !!}
                </div>
                <div class="mt-4">
                    <a href="{{ route('news.index') }}" class="btn btn-outline-primary rounded-pill"><i class="bi bi-arrow-left me-1"></i> Volver a noticias</a>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card card-hover shadow-sm">
                    <div class="card-body p-4">
                        <h6 class="fw-bold mb-3">Otras noticias</h6>
                        @forelse($recent as $item)
                            <a href="{{ route('news.show', $item->slug) }}" class="d-flex gap-3 mb-3 text-decoration-none align-items-center">
                                @if($item->image)
                                    <img src="{{ image_url($item->image) }}" style="width:64px;height:64px;object-fit:cover;border-radius:10px;" alt="">
                                @endif
                                <div class="text-dark fw-semibold small">{{ $item->title }}</div>
                            </a>
                        @empty
                            <p class="text-muted small mb-0">No hay mas noticias.</p>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection