@php
        $tokohs = \Modules\Tokoh\Models\Tokoh::take(2)->get();
    @endphp

    @if ($tokohs->count() > 0)


    <div class="px-3 mb-2 py-3 bg-gray-300 rounded-lg shadow-md">
     
<div class="flex relative items-center gap-x-3">
                    <div class="w-full mt-2">
                        <h4 class="border_section2  text-base capitalize"><a href="#" title="">Tokoh</a></h4>  
                    </div>   

                    <a href="{{ route('frontend.tokoh.index') }}" class="flex items-center gap-2 px-3 font-semibold py-2 text-sm text-gray-800 duration-150 bg-gray-200 rounded-lg hover:bg-gray-400 active:bg-gray-800">
                        All
                        <i class="fa fa-chevron-circle-right"></i>
                    </a>
                </div>

        @foreach ($tokohs as $kh)
 <div class="overflow-hidden flex cursor-pointer">
    <div class="relative md:flex flex w-4/12 p-1">
        <div class="rounded-full w-24 h-24 md:w-28 md:h-28 flex justify-center text-center overflow-hidden">
        <img class="h-full w-full object-cover transition-transform duration-300 ease-in-out transform hover:scale-110" src="{{ asset_cdn($kh->image,'thumbnail','tokoh') }}"
        title="{{$kh->nama}}" alt="{{$kh->nama}}"
        /> 
        </div>
     
    </div>
    <div class="w-8/12 px-1 py-2 font-inter text-gray-500 text-sm flex flex-col justify-center">
        <div class="w-full mb-0 break-words leading-tight">
         <div class="text-sm font-normal">
           Oleh :<a href="{{ route('frontend.authors.show', [encode_id($kh->penulis->id), $kh->penulis->slug]) }}"> {{ $kh->penulis->name }}</a>
        </div>   
          <a href="{{ route('frontend.tokoh.show', [encode_id($kh->id), $kh->slug]) }}">
         <h4 class="hover:text-red-500 text-xl text-gray-900">{{ $kh->nama }}</h4>
         </a>
        

        <div class="-mt-2 mb-1">{{ isiberita($kh->description, 1, 60) }}</div>
       </div>
       <div class="text-sm  text-yellow-500 font-normal">
        {{ datepub($kh->created_at) }}
        </div>
        
    </div>
    
</div>
        @endforeach
            
    </div>
      @else
      
    @endif

    @push('page_css')
     <style type="text/css">
        .border_section2 {
            position: relative;
            padding-bottom: 9px;
            margin-bottom: 10px;
            font-size: 20px;
        }
        .border_section2:before {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 5px;
            background: #c00;
            z-index: 1;
        }
        .border_section2:after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: #9d9a9a;
           }
     </style>

    @endpush