@php
    use Illuminate\Support\Str;
@endphp

@extends('layouts.app')

@section('title', $article->title)

@section('meta')
    <meta name="description" content="{{ $article->meta_description ?? Str::limit(strip_tags($article->excerpt ?? $article->body), 160) }}">
    @if($article->og_image_url)
        <meta property="og:image" content="{{ $article->og_image_url }}">
    @endif
    <meta property="og:title" content="{{ $article->title }}">
    <meta property="og:description" content="{{ $article->meta_description ?? Str::limit(strip_tags($article->excerpt ?? $article->body), 160) }}">
@endsection

@section('content')
<div class="bg-gradient-to-b from-slate-50 to-white">
    <div class="mx-auto max-w-5xl px-4 py-10 lg:py-14">
        <header class="mx-auto max-w-4xl text-center">
            <p class="text-sm font-medium text-slate-500">
                {{ optional($article->published_at)->format('d/m/Y') ?? 'Sem data' }}
                · {{ $article->author_name ?? $article->author ?? 'Redação' }}
            </p>
            <h1 class="mt-4 text-4xl font-semibold leading-tight text-slate-900 md:text-5xl">
                {{ $article->title }}
            </h1>
            @if($article->excerpt)
                <p class="mt-4 text-lg text-slate-600">{{ $article->excerpt }}</p>
            @endif
        </header>

        @if($article->featured_image_url)
            <figure class="mx-auto my-10 max-w-4xl overflow-hidden rounded-2xl shadow-md">
                <img src="{{ $article->featured_image_url }}" alt="{{ $article->title }}" class="w-full h-auto object-cover" loading="lazy">
            </figure>
        @endif

        <article class="article-prose mx-auto max-w-4xl">
            {!! $article->content_html ?? $article->body !!}
        </article>
    </div>
</div>
@endsection