@extends('layouts.app')

@section('content')
    @include('partials.navbar')

    <div class="container py-5">

        <h3 class="mb-4">
            Articles by {{ $user->name }}
        </h3>

        <div class="row">
            @foreach ($articles as $article)
                <div class="col-md-3 mb-4">
                    <div class="card h-100 shadow-lg border-0">

                        @if ($article->article_image)
                            @php
                                $path = $article->article_image;

                                if (str_starts_with($path, 'uploads/')) {
                                    $imageUrl = asset($path); // old images
                                } else {
                                    $imageUrl = asset('storage/' . $path); // new images
                                }
                            @endphp

                            <img src="{{ $imageUrl }}" alt="Article Image" class="article-image mt-3"
                                style="width:100%; height:200px; object-fit:cover;">
                        @endif
                        &nbsp; &nbsp; By {{ $user->name }} | 📅 {{ $article->created_at->format('d F Y') }}
                        <div class="card-body d-flex flex-column">

                            <h6 class="card-title" style="font-size:16px !important">
                                <a href="{{ route('articles.show', $article->id) }}" class="text-dark text-decoration-none">
                                    {{ $article->title }}
                                </a>
                            </h6>

                            <p class="text-muted small mt-auto">
                                ⏱ {{ $article->reading_time }} min read | 📝 {{ $article->word_count }} words
                            </p>

                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="mt-4">
            {{ $articles->links() }}
        </div>

    </div>
@endsection