@extends('layouts.users')

@section('title', 'Articles')

@section('content')

    <section class="articles" id="articles">
        <div class="section-container">
            <div class="section-header">
                <div class="section-label" data-aos="fade-up">
                    Article
                </div>

                <h2 class="section-title" data-aos="fade-up" data-aos-delay="100">
                    Materi Article
                </h2>

                <p class="section-description" data-aos="fade-up" data-aos-delay="200">
                    Belajar pelan-pelan, yang penting jalan. Skill naik, pusing belakangan.
                </p>
            </div>

            <div class="articles-grid">
                @forelse($articles as $article)
                    <div class="articles-card"
                        data-aos="fade-up"
                        data-aos-delay="{{ $loop->index * 100 }}">

                        <div class="card-image-wrapper">
                            @if ($article->articleDetail && $article->articleDetail->thumbnail)
                                <img src="{{ asset('storage/' . $article->articleDetail->thumbnail) }}"
                                    alt="{{ $article->title }}">
                            @else
                                <img src="{{ asset('users/assets/img/notfond.png') }}"
                                    alt="{{ $article->title }}">
                            @endif
                        </div>

                        <div class="card-body">
                            <h2 class="card-title">{{ $article->title }}</h2>
                            <p class="card-text">
                                {{ Str::limit(strip_tags($article->articleDetail->content ?? 'Materinya lagi nyiapin diri, sabar ya...'), 100) }}
                            </p>

                            <a href="{{ route('article.show', $article->slug) }}"
                            class="btn-article">
                                Baca Article
                            </a>
                        </div>
                    </div>
                @empty
                    <p data-aos="fade-up" style="text-align: center">
                        Data Kosong
                    </p>
                @endforelse
            </div>
        </div>
    </section>
@endsection()