@extends('layouts.app')

@php $siteName = App\Models\Setting::get('site_name', '深圳市云创芯电子有限公司'); @endphp
@section('title', $news->seoTitle() . ' - ' . $siteName)
@section('description', $news->seoDescription())

@section('content')
    <section class="px-4 py-12 sm:px-6 lg:px-8 lg:py-16">
        <div class="mx-auto max-w-3xl">
            <nav class="mb-6 flex items-center gap-1.5 text-sm text-muted">
                <a href="{{ url('/') }}" class="hover:text-primary">首页</a><span>/</span>
                <a href="{{ route('news.index') }}" class="hover:text-primary">新闻动态</a><span>/</span>
                <span class="text-fg">{{ $news->title }}</span>
            </nav>
            <div class="flex items-center gap-3">
                <span class="badge badge-primary">{{ $news->categoryLabel() }}</span>
                <span class="text-sm text-muted">{{ $news->published_at?->format('Y-m-d') }}</span>
            </div>
            <h1 class="mt-3 text-2xl font-bold tracking-tight text-fg sm:text-3xl">{{ $news->title }}</h1>
            @if ($news->summary)<p class="lead mt-4 text-base text-muted">{{ $news->summary }}</p>@endif
            @if ($news->body)
                <div class="prose mt-6 text-fg">
                    @if (preg_match('/<[a-z][a-z0-9]*[\s>]/i', $news->body))
                        {!! $news->body !!}
                    @else
                        {!! nl2br(e($news->body)) !!}
                    @endif
                </div>
            @endif
            <div class="mt-6">
                <a href="{{ route('news.index') }}" class="inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:text-primary-hover"><x-icon name="arrow" :size="16" class="rotate-180" /> 返回新闻列表</a>
            </div>
        </div>
    </section>
@endsection