@extends('layouts.app')

@section('content')
<div class="container">
    <h2 class="mb-4 text-center">Latest RSS Articles</h2>
    <div class="row row-cols-1 row-cols-md-4 g-4">
        @foreach ($articles as $article)
            <div class="col">
                <div class="card h-100">
                    <img src="{{ $article->image_url ?? asset('images/placeholder.png') }}"
                         class="card-img-top"
                         alt="Image"
                         onerror="this.onerror=null;this.src='{{ asset('images/placeholder.png') }}';">
                    <div class="card-body">
                        <h5 class="card-title">{{ \Str::limit($article->title, 60) }}</h5>
                        <p class="card-text">{{ \Str::limit($article->description, 100) }}</p>
                    </div>
                    <div class="card-footer text-center">
                        <a href="{{ $article->link }}" target="_blank" class="btn btn-sm btn-primary">Read More</a>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

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