@extends('layouts.frontend.master')
@section('content')
<div class="my-4 relative">
    <div class="container relative z-[9] py-9">
        <div class="grid grid-cols-12 gap-4 py-3 overflow-hidden">
            <div class="lg:col-span-9 col-span-12 my-3">
                <img loading="lazy" src="{{ $article->main_image() }}"
                    class="w-full lg:h-[500px] h-[200px] rounded-[5px]" alt="" />
                <div class="py-5">
                    <div class="flex items-center justify-between">
                        <h3 class="text-black text-[22px] font-bold">{{ app()->isLocale('ar') ? $article->title_ar :
                            $article->title_en }}</h3>
                        <span class="text-main font-bold">{{ $article->created_at->format('d-m-Y') }}</span>
                    </div>
                    <p class="my-[10px] leading-[30px] text-[15px] text-black">
                        {!! app()->isLocale('ar') ? $article->description_ar : $article->description_en !!}
                    </p>
                </div>
            </div>
            <div class="lg:col-span-3 col-span-12 my-3">
                <h1 class="mb-4 font-bold text-[18px]">{{ __('website.topViews') }}</h1>
                <div class="h-[500px] overflow-y-auto">
                    @foreach ($topViews as $topView)
                    <div class="flex items-center mb-4 group border block overflow-hidden rounded-[10px] p-2">
                        <div class="bg-[#fcf7f0] w-[150px] h-[90px] rounded-[10px] overflow-hidden">
                            <img loading="lazy" src="{{ $topView->main_image() }}"
                                class="w-full h-full transition duration-500 ease-in-out group-hover:scale-[1.1]"
                                alt="" />
                        </div>
                        <div class="px-2">
                            <h3 class="text-black font-bold text-[16px] line-clamp-1">
                                {{ app()->isLocale('ar') ? $topView->title_ar : $topView->title_en }}
                            </h3>
                            <p class="my-[5px] text-[12px] text-black line-clamp-1">
                                {!! Str::limit(
                                app()->isLocale('ar') ? $topView->description_ar : $topView->description_en, 15) !!}
                            </p>
                            <a href="{{ route('article.show', $topView) }}"
                                class="text-main inline-block text-[13px] underline rounded-[5px]">{{
                                __('website.seeMore') }}</a>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

        </div>
    </div>
</div>
@endsection