@extends('layouts.app')

@section('title', $article->title . ' — Блог Placeo')

@section('content')
<article class="mx-auto max-w-3xl">
    <nav aria-label="breadcrumb" class="mb-4 text-sm text-muted">
        <a href="{{ route('home') }}" class="hover:text-brand-700">Главная</a>
        <span class="mx-1">/</span>
        <a href="{{ route('blog.index') }}" class="hover:text-brand-700">Блог</a>
    </nav>

    <h1 class="mb-3 text-3xl font-extrabold tracking-[-0.02em] text-ink">{{ $article->title }}</h1>

    <div class="mb-6 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-muted">
        <span>{{ $article->authorName() }}</span>
        @if ($article->published_at)
            <span aria-hidden="true">·</span>
            <time datetime="{{ $article->published_at->toDateString() }}">{{ $article->published_at->isoFormat('D MMMM YYYY') }}</time>
        @endif
    </div>

    @if ($article->hasCover())
        <img src="{{ $article->coverUrl() }}" alt="{{ $article->title }}"
             class="mb-8 aspect-[16/9] w-full rounded-2xl object-cover">
    @endif

    <div class="page-content">
        {!! $article->content !!}
    </div>

    <div class="mt-10 border-t border-gray-200 pt-6">
        <a href="{{ route('blog.index') }}" class="inline-flex text-sm font-semibold text-brand-700 hover:underline">← Все статьи</a>
    </div>
</article>
@endsection