@extends('frontend.layouts.main')
@section('title') {{ $module_title }} @endsection
@section('content')
<!-- Whats New Start -->
<section class="whats-news-area pt-20 mt-2 pb-20">
    <div class="absolute top-0 left-0 w-full h-4 shadow-md"></div>
    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                {{-- {{$detail->nama}} --}}
                <div class="py-1 px-3">
                    
                    <span class="py-1 px-2.5 border-none font-inter rounded-sm bg-gray-200 text-sm text-gray-800 uppercase tracking-widest font-medium">tokoh</span>
                    <h2 class="mb-2 md:my-4 text-3xl md:text-4xl leading-tight md:leading-tight">
                    {{$detail->nama}}
                    </h2>
                </div>
                
                <div class="p-2 space-y-1">
                    <div class="flex items-start justify-between gap-4">
                        <a class="flex flex-wrap gap-1 md:gap-3 mt-2" href="{{ route('frontend.authors.show', [encode_id($detail->penulis->id), $detail->penulis->slug]) }}">
                            <div class="h-8 w-8 md:h-10 md:w-10">
                                <img class="h-full w-full rounded-full object-cover object-center ring ring-white"
                                src="{{ asset(@$detail->penulis->avatar) }}" title="{{ $detail->penulis->name }}" />
                            </div>
                            <div>
                                <div class="hover:text-red-500 md:text-base text-sm font-semibold text-gray-700">
                                    <span class="text-gray-500 text-sm font-medium">Penulis :</span>
                                {{ $detail->penulis->name }}</div>
                                <div class="-mt-1 md:text-sm text-xs text-gray-600">
                                    {{ tanggal($detail->created_at) }}
                                </div>
                            </div>
                        </a>
                        <div class="mt-1 shrink-0 text-xs inline-flex items-center gap-1">
                            <x-library.share />
                        </div>
                    </div>
                    
                </div>
                <div class="px-2 py-0">
                    <div class="md:shrink-0 float-left mr-3 md:mb-3 rounded-lg
                        overflow-hidden relative w-58 object-cover
                        md:h-96 md:w-96">
                        <img class="h-full w-full object-cover transition-transform duration-300 ease-in-out transform hover:scale-110" src="{{ asset_cdn($detail->image, 'thumbnail','tokoh') }}">
                        <div class="hidden md:block bg-gradient-to-t object-cover from-gray-900 to-gray-800 opacity-70 absolute mx-auto  break-words leading-tight bottom-0 left-0 text-sm text-gray-100">
                            <div class="px-3 py-2 m-1">
                                {{ $detail->info_foto }}
                            </div>
                        </div>
                    </div>
                    
                       <x-paragraphs :content="$detail->description" :related="$bacajuga" />

                    </div>
                    
                    
                    <div class="row">
                        <div class="hidden md:block px-0 w-full h-auto mx-auto pb-8">
                            <div class="commentbox" id="{{ route('frontend.tokoh.show', encode_id($detail->id)) }}"></div>
                            <x-library.comment />
                        </div>
                    </div>
                </div>
                <div class="hidden md:block col-lg-4 md:border-l md:border-gray-300">
                    @include('tokoh::frontend.tokoh.sidebar')
                </div>
            </div>
        </div>
    </section>
    <!-- Whats New End -->
    @endsection
    @push('page_css')

<style>
        /* Aspect Ratio Utility */
        .pb-9\/16 {
            padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
        }
        .pb-9\/16 iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

    .related-news::before {
        content: "";
        height: 100%;
        border: 3px solid;
        border-style: solid;
        border-color: #d12b25;
        position: absolute;
        left: 0px;
        top: 50%;
        transform: translateY(-50%);
    }



    </style>
@endpush
    @push ('after-scripts')
    @endpush