@extends('layouts.app')

{{-- Article-specific SEO overrides the defaults from layouts.app --}}
@push('schema')
<script type="application/ld+json">{!! json_encode([
    '@context' => 'https://schema.org',
    '@type' => 'Article',
    'headline' => $post->title,
    'description' => $post->meta_description ?? $post->excerpt,
    'datePublished' => $post->published_at?->toAtomString(),
    'dateModified' => $post->updated_at?->toAtomString(),
    'mainEntityOfPage' => route('blog.show', $post),
    'author' => ['@type' => 'Organization', 'name' => setting('site_name', 'InstaGrab')],
    'publisher' => ['@type' => 'Organization', 'name' => setting('site_name', 'InstaGrab'), 'url' => url('/')],
], JSON_UNESCAPED_SLASHES) !!}</script>
@endpush

@section('seo')
    <x-seo :title="$post->meta_title ?? $post->title.' | '.setting('site_name', 'InstaGrab')"
           :description="$post->meta_description ?? $post->excerpt"
           :canonical="route('blog.show', $post)"
           type="article" />
@endsection

@section('content')
<section class="page-head">
    <div class="container">
        <x-breadcrumbs :items="[
            ['name' => 'Home', 'url' => route('home')],
            ['name' => 'Blog', 'url' => route('blog.index')],
            ['name' => str($post->title)->limit(50)->toString(), 'url' => route('blog.show', $post)],
        ]" />
        <h1 class="page-title">{{ $post->title }}</h1>
        <p class="text-body-secondary small mb-0">
            <time datetime="{{ $post->published_at?->toDateString() }}">{{ $post->published_at?->format('F j, Y') }}</time>
            &middot; {{ reading_time($post->body) }}
        </p>
    </div>
</section>

<article class="section pt-4">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8 content-prose">
                {{--
                    Post bodies are trusted admin/seeder HTML. If untrusted
                    authors are ever allowed, run this through an HTML
                    sanitizer (e.g. mews/purifier) before rendering.
                --}}
                {!! $post->body !!}

                <div class="cta-panel mt-5">
                    <h2 class="h5 fw-bold mb-1">Try it yourself</h2>
                    <p class="small text-body-secondary mb-3">Paste any public Instagram link and save it in seconds.</p>
                    <a href="{{ route('home') }}#downloader" class="btn btn-gradient px-4">Open the downloader</a>
                </div>
            </div>
        </div>

        @if($related->isNotEmpty())
            <div class="row justify-content-center mt-5">
                <div class="col-lg-8">
                    <h2 class="h5 fw-bold mb-3">Related articles</h2>
                    <div class="row g-4">
                        @foreach($related as $rel)
                            <div class="col-md-4">
                                <x-blog-card :post="$rel" />
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @endif
    </div>
</article>
@endsection