@extends('layouts.app')

@section('content')
<div class="container my-4">
    {{-- @if($articles->count())
    <div class="row row-cols-1 row-cols-md-4 g-2">
        @foreach($articles as $article)
        <div class="col">
            <div class="card h-100">
                <div>
                    &nbsp;<img src="{{ $article->logo }}" class="news-logo {{ $article->logo_has_black_background ? 'black-bg' : '' }}" alt="Logo">
                    <img src="{{ $article->logo1 }}" alt="" class="news-logo1">
                </div>
                @if($article->image_url)
                <img src="{{ $article->image_url }}" loading="lazy" class="card-img-top" alt="Article Image">
                @else
                <img src="https://via.placeholder.com/150" loading="lazy" class="card-img-top" alt="Default Image">
                @endif
                <div class="card-body">
                    <h5 class="card-title">{{ $article->title }}</h5>
                    <p class="card-text" id="p" style="margin-bottom: -3px;">
                        {{ Str::limit($article->description, 150) }}
                    </p>
                    <small class="text-muted" style="font-size: 10px; margin-bottom: -10px;">
                        <span style="color: #257180;">{{ $article->author ?? ' ' }}</span> |
                        {{ $article->publish_date ?? ' ' }}
                    </small>
                </div>
                <div class="card-footer" style="margin-top: -1rem; font-family: Times; font-weight: 100;">
                    <a href="{{ $article->link }}" class="read-more-btn mt-1" target="_blank">Read Full Article
                        &nbsp;<i class="fa fa-bullseye"></i></a>
                </div>
            </div>
        </div>
        @endforeach
    </div>
    @else --}}
    <div class="alert alert-warning text-center" role="alert">
        No articles available at the moment.
    </div>
    @endif
</div>
@endsection