@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 Artikel
                </h2>

                <p class="section-description" data-aos="fade-up" data-aos-delay="200">
                    Pelajari berbagai materi yang disusun secara sistematis untuk membantu meningkatkan pengetahuan dan
                    keterampilan Anda.
                </p>
            </div>


            <div class="section-search" data-aos="fade-up" data-aos-delay="300">
                <form method="GET" action="{{ route('article.index') }}" class="search-form">
                    <input type="text" name="search" placeholder="Cari learning path..." value="{{ request('search') }}">

                    <button type="submit" class="btn-search">
                        Cari
                    </button>

                    @if(request('search'))
                        <a href="{{ route('article.index') }}" class="btn-reset">
                            Reset
                        </a>
                    @endif
                </form>
            </div>

            <div id="articles-container">
                <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) }}">
                                @else
                                    <img src="{{ asset('users/assets/img/notfond.png') }}">
                                @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 class="pagination-wrapper" data-aos="fade-up" data-aos-delay="200">
                    {{ $articles->links() }}
                </div>

            </div>
        </div>
    </section>

@endsection()