@extends('layout/main')
@section('title', 'Article | ' . env('APP_NAME'))
@section('content')
<div class="mb-30"></div>
<div class="container">
    <h3 class="text-xl md:text-[28px] font-bold text-primary mb-30">
        {{ sessionLocale() == 'en' ? $article->title_en : $article->title_ar }}</h3>
    <div class="col-span-1 space-y-30 mb-30">
        <div class="bg-white rounded-2xl shadow-lg text-center relative w-50px h-50px" style="width:50% ; height:50%;   display: block;margin-left: auto;  margin-right: auto;  width: 50%;">
            <div class="lazyload-container lazyload " style="background-image: url(./uploads/placeholder.webp)"></div>
            <img class="w-full h-full object-cover lazyload rounded-2xl" src="/storage/{{$article->image}}" alt="">
        </div>
    </div>
    <div class="bg-white border border-exgray rounded-2xl shadow-md p-30 mb-40">
        <p class="text-sm font-medium text-exdark leading-7">
            {!! sessionLocale() == 'en' ? $article->description_en : $article->description_ar !!}</p>
    </div>
    <div class="mb-100"></div>
</div>
@endsection