@extends('layouts.app')
@section('head')
    <x-meta
        title="Post Preview | B2BSaaS.com"
        description="{{$post->excerpt}}"
        image="{{asset('b2bsaas.png')}}"
        url="{{route('post_preview',$post->slug)}}"
    />
@endsection
@section('content')
    <div class="max-w-7xl mx-auto pb-12">
        <div class="mx-auto max-w-7xl px-6 pb-32 pt-36 lg:px-0 lg:pt-12">
                <p class="text-red-500 mb-3 max-w-2xl">This is the post preview page to check post before published. Only available for authenticated users.</p>
                <h1 class="font-bold text-5xl mb-6">{{$post->title}}</h1>
                <p class="max-w-2xl mb-6 text-lg font-light">
                    {{$post->excerpt}}
                </p>
                <div class="flex justify-start items-center gap-4">
                    <div>
                        <img src="{{$post->author->getFirstMediaUrl('avatar','thumb')}}"
                             class="rounded-full h-[50px] w-[50px] shadow-lg"
                             alt="{{$post->author->name}}">
                    </div>
                    <div class="flex justify-start items-center gap-4 divide-x divide-gray-200">
                        <div>
                            <p>Post by <span class="font-bold">{{$post->author->name}}</span></p>
                            @if($post->author->title)
                                <p class="text-gray-600 text-sm">{{$post->author->title}} @if($post->author->company) - {{$post->author->company->name}} @endif</p>
                            @endif
                        </div>
                        <div class="px-5 text-sm text-gray-700 font-light">
                            <span>{{$post->published_at->format('Md,Y')}}</span>
                        </div>
                    </div>
                </div>
                <div class="mt-10">
                    <img src="{{$post->getFirstMediaUrl('cover')}}"
                         class="rounded-xl shadow-lg w-full"
                         alt="{{$post->title}}">
                </div>
                <div class="flex justify-start gap-10">
                    <article class="mt-10 prose prose-xl prose-p:text-base
                    prose-h2:text-3xl
                    prose-h3:text-2xl
                    prose-h4:text-lg
                    prose-img:rounded-xl
                    font-light
                    prose-headings:text-blue-500
                    prose-headings:font-semibold
                    prose-ul:list-disc
                    prose-ol:list-decimal
                    prose-strong:font-bold
                    prose-li:text-base
                    prose-video:aspect-w-16
                    prose-video:aspect-h-9
                    prose-th:text-left
                    prose-th:font-normal
                    prose-th:border
                    prose-th:px-3
                    prose-th:py-1
                    prose-th:bg-blue-50
                    prose-td:border
                    prose-td:border-gray-300
                    prose-td:pl-2
                    prose-thead:text-left
                    prose-table:my-5
                    prose-table:border
                    prose-table:border-gray-300
                    prose-table:w-full">
                        {!! $htmlOut !!}
                    </article>
                    <div class="col-span-1 pt-10 order-first md:order-last">

                        <div class="w-full prose-sm prose-a:underline prose-a:text-sm border border-gray-200 rounded-xl p-5">
                            <h2 class="font-bold text-2xl mb-6">Table of Contents</h2>
                            {!! $toc !!}
                        </div>
                    </div>


                </div>

        </div>
    </div>
@endsection