@extends('layouts.main')
@section('title', 'NalarKita | ' . $article->title)
@section('meta_description', session('locale') == 'en' ? $article->meta_description_en : $article->meta_description_id)
@section('meta_keywords', session('locale') == 'en' ? $article->meta_keyword_en : $article->meta_keyword_id)
@section('meta_title', session('locale') == 'en' ? $article->meta_og_title_id : $article->meta_og_title_en)
@section('pageContent')
    <!-- Content -->
    <main>
        <section class="container mx-auto my-10 px-8">
            <!-- Breadcrumb -->
            <nav class="flex" aria-label="Breadcrumb">
                <ol class="inline-flex items-center space-x-1 md:space-x-2">
                    <li class="inline-flex items-center">
                        <a href="{{ route('user.article.index') }}" class="inline-flex items-center text-sm text-neutral-30 hover:text-primary-30 transition">
                            Article
                        </a>
                    </li>
                    <li aria-current="page">
                        <div class="flex items-center">
                            <svg class="w-4" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M9 18L15 12L9 6" stroke="#9EA2A8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                            <span class="ms-1 text-sm font-medium text-primary-30 md:ms-2">{{ session('locale') == 'en' ? $article->title_en : $article->title_id }}</span>
                        </div>
                    </li>
                </ol>
            </nav>
            <!-- End Breadcrumb -->

            <!-- Content -->
            <article>
        <span class="flex flex-col gap-2 my-8">
          <h1 class="text-2xl sm:text-4xl text-primary-30 font-bold">
            {{ session('locale') == 'en' ? $article->title_en : $article->title_id }}
          </h1>
          <time class="text-sm text-neutral-30">Diunggah {{ \Carbon\Carbon::parse($article->created_at)->translatedFormat('d F Y') }}</time>
        </span>

                <div class="rounded-lg overflow-hidden">
                    <figure>
                        <img class="w-full h-auto max-h-[400px] object-cover rounded-lg" src="{{ asset('storage/' . $article->thumbnail) }}" alt="Gambar konten">
                    </figure>
                </div>
                <div class="mt-8 text-neutral-40 text-base leading-6 space-y-4">
                    {!! session('locale') == 'en' ? $article->content_en : $article->content_id !!}
                </div>
            </article>
            <!-- End Content -->

            <hr class="my-16 border-neutral-20">

            <!-- Ohter Article -->
            <span class="flex items-end justify-between">
        <span class="space-y-2">
          <header>
            <h2 class="text-2xl sm:text-4xl text-primary-30 font-bold">
                {{ __('latest_article') }}
            </h2>
          </header>
          <p class="text-sm text-neutral-30">{{ __('latest_article_caption') }}</p>
        </span>
        <a href="{{ route('user.article.index') }}" class="inline-flex items-center bg-primary-30 py-1 px-3 sm:py-3 sm:px-5 text-neutral-10 hover:bg-primary-40 transition rounded-full">
          {{ __('button_see_all') }}
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9 18L15 12L9 6" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </a>
      </span>

            <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-12 md:gap-x-4 xl:gap-x-6 md:gap-y-12 mt-8">
                @foreach($articles as $article)
                    <div class="max-w-md w-full mx-auto min-h-[30rem] rounded-2xl overflow-hidden shadow-primary bg-white flex flex-col hover:shadow-primary-20 hover:shadow-primary transition transform hover:scale-105">
                        <figure>
                            <img class="w-full h-52 object-cover" src="{{ asset('storage/' . $article->thumbnail) }}" alt="Image Description">
                        </figure>

                        <div class="flex flex-col justify-between flex-grow p-4 gap-4">
                            <div class="flex flex-col gap-2">
                                <div class="flex items-center gap-2">
{{--                                    <span class="text-sm text-primary-30 bg-primary-10 rounded-full py-1 px-4">Teknologi</span>--}}
{{--                                    <svg width="2" height="32" viewBox="0 0 2 32" fill="none" xmlns="http://www.w3.org/2000/svg">--}}
{{--                                        <path d="M1 0V32" stroke="#D0D4DB"/>--}}
{{--                                    </svg>--}}
                                    <p class="text-primary-20">{{ \Carbon\Carbon::parse($article->created_at)->translatedFormat('d F Y') }}</p>
                                </div>
                                <h2 class="text-lg sm:text-2xl font-bold text-primary-30 hover:text-primary-40 hover:underline">
                                    <a href="{{ route('user.article.detail', $article->slug_id) }}">

                                        {{ session('locale') == 'en' ? $article->title_en : $article->title_id }}
                                    </a>
                                </h2>
                                <p class="text-sm sm:text-base text-neutral-30 mt-2 overflow-hidden text-ellipsis line-clamp-4">
                                    {{ session('locale') == 'en' ? $article->meta_description_en : $article->meta_description_id }}
                                </p>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <!-- End Other Article -->
        </section>
    </main>
    <!-- End Content -->
@endsection

@section('scripts')

@endsection