@extends('layouts.app')
@section('head')
    <x-meta
        title="{{$post->meta_title}} | B2BSaaS.com"
        description="{{$post->meta_description}}"
        image="{{$post->getFirstMediaUrl('cover')}}"
        url="{{route('hub.show',$post->slug)}}"
    />
    <x-schemes.article :post="$post"/>
@endsection
@section('content')
    <div class="max-w-7xl mx-auto pb-12 px-4 sm:px-6 lg:px-8 2xl:px-0">
        <div class="mx-auto max-w-7xl px-6 pb-5 pt-10 lg:px-0 lg:pt-12">
            <a href="{{route('hub')}}" class="flex justify-start items-center gap-2 mb-4 hover:underline">
                <x-heroicon-o-chevron-left class="w-3 h-3 text-gray-500"/>
                <span>Back to knowledge hub</span>
            </a>
            <h1 class="font-bold text-4xl md:text-5xl mb-6">{{$post->title}}</h1>
            <p class="max-w-3xl 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')}}" loading="lazy"
                         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('M d, Y')}}</span>
                    </div>
                </div>
            </div>
            <div class="mt-10">
                <img src="{{$post->getFirstMediaUrl('cover')}}" loading="lazy"
                     class="rounded-xl lg:shadow-lg w-full border border-gray-100"
                     alt="{{$post->title}}">
            </div>
            <div class="flex flex-col lg:flex-row justify-between gap-10">
                <article class="mt-2 lg:mt-10 prose lg:prose-md xl: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="pt-10 order-first md:order-last">
                    <div class="w-full prose-sm prose-a:text-sm border border-gray-200 rounded-xl p-5 sticky top-4">
                        <h2 class="font-bold text-2xl mb-6">Table of Contents</h2>
                        {!! $toc !!}
                    </div>
                </div>
            </div>
            <hr class="my-5">
            <div>
                <a href="{{route('hub')}}" class="flex justify-start items-center gap-2 mb-4 hover:underline">
                    <x-heroicon-o-chevron-left class="w-3 h-3 text-gray-500"/>
                    <span>Back to knowledge hub</span>
                </a>
            </div>

            @if(!$relatedPosts->isEmpty())
            <div class="mt-10">
                <h2 class="text-2xl mb-5">More from B2B SaaS Hub</h2>
                <div class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
                    @foreach($relatedPosts as $rpost)
                    <article class="flex flex-col items-start justify-start">
                        <a href="{{route('hub.show',$rpost->slug)}}" class="relative w-full">
                            <img src="{{$rpost->getFirstMediaUrl('cover','thumb')}}" alt="" class="aspect-[7/3] w-full rounded-2xl bg-gray-100 object-cover sm:aspect-[2/1] lg:aspect-[2/1]">
                            <div  class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
                        </a>
                        <div class="max-w-xl">
                            <div class="mt-8 flex items-center gap-x-4 text-xs min-h-10">
                                <time datetime="{{$rpost->published_at->format('Y-m-d')}}" class="text-gray-500">{{$rpost->published_at->format('M d, Y')}}</time>
                                @foreach($rpost->categories as $category)
                                    <a href="{{route('hub.category',$category->slug)}}" class="relative z-10 rounded-full bg-gray-50 px-3 py-1.5 font-medium text-gray-600 hover:bg-gray-100">
                                        {{$category->name}}
                                    </a>
                                @endforeach
                            </div>
                            <div class="group relative">
                                <h3 class="mt-3 text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600">
                                    <a href="{{route('hub.show',$rpost->slug)}}">
                                        <span class="absolute inset-0"></span>
                                        {{$rpost->title}}
                                    </a>
                                </h3>
                                <p class="mt-5 line-clamp-3 text-sm leading-6 text-gray-600">
                                    {{$rpost->excerpt}}
                                </p>
                            </div>

                        </div>
                    </article>
                    @endforeach

                    <!-- More posts... -->
                </div>
            </div>
            @endif
        </div>
    </div>
@endsection