@extends('layouts.marketing')

@section('title', ($article->meta_title ?: $article->title).' · '.config('app.name'))
@section('meta_description', $article->meta_description ?: $article->summary(160))

@push('head')
    <meta property="og:title" content="{{ $article->meta_title ?: $article->title }}">
    <meta property="og:description" content="{{ $article->meta_description ?: $article->summary(160) }}">
    <meta property="og:type" content="article">
    @if ($article->coverUrl())<meta property="og:image" content="{{ $article->coverUrl() }}">@endif
    <link rel="canonical" href="{{ route('blog.show', $article->slug) }}">
@endpush

@section('content')
<article class="mx-auto max-w-3xl px-4 py-14 sm:px-6">
    <a href="{{ route('blog.index') }}" class="inline-flex items-center gap-1.5 text-sm font-medium text-slate-400 hover:text-white">
        <x-lucide-arrow-left class="h-4 w-4" /> All articles
    </a>

    <header class="mt-6">
        @if ($article->category)
            <a href="{{ route('blog.index', ['category' => $article->category->slug]) }}" class="rounded-full bg-violet-500/15 px-3 py-1 text-xs font-semibold text-violet-300">{{ $article->category->name }}</a>
        @endif
        <h1 class="mt-4 text-3xl font-extrabold leading-tight text-white sm:text-[2.5rem]">{{ $article->title }}</h1>
        <div class="mt-4 flex flex-wrap items-center gap-2 text-sm text-slate-500">
            @if ($article->author)<span>By {{ $article->author->name }}</span><span>·</span>@endif
            <span>{{ $article->published_at?->format('F j, Y') }}</span><span>·</span>
            <span>{{ $article->readingMinutes() }} min read</span>
        </div>
    </header>

    @if ($article->coverUrl())
        <img src="{{ $article->coverUrl() }}" alt="" class="mt-8 aspect-video w-full rounded-2xl object-cover">
    @endif

    <div class="prose-blog mt-10">{!! $article->bodyHtml() !!}</div>

    @if ($related->isNotEmpty())
        <div class="mt-16 border-t border-white/10 pt-10">
            <h2 class="text-lg font-bold text-white">Keep reading</h2>
            <div class="mt-5 grid gap-4 sm:grid-cols-3">
                @foreach ($related as $r)
                    <a href="{{ route('blog.show', $r->slug) }}" class="rounded-xl border border-white/10 bg-white/[0.03] p-4 transition hover:border-white/20 hover:bg-white/[0.06]">
                        <div class="text-sm font-semibold leading-snug text-white">{{ $r->title }}</div>
                        <div class="mt-1.5 text-xs text-slate-500">{{ $r->published_at?->format('M j, Y') }}</div>
                    </a>
                @endforeach
            </div>
        </div>
    @endif
</article>
@endsection