@props(['articles', 'grid' => true, 'date' => true])

@if($grid)
    <div class="card-columns">
        @foreach($articles as $a)
        <div class="card border-dark">
            <img class="card-img-top" src="/uploads/articles/{!!$a->getImage()!!}" alt="{{ $a->title }}">
            <div class="card-body">
                <h5 class="card-title">{{ $a->title }}</h5>
                <p class="card-text">{!! $a->description !!}</p>
            </div>
            <div class="card-footer">
                <div class="row">
                    <div class="col-7">
                        <i class="fas fa-calendar"></i>
                        @if($date)
                        <small class="text-muted">
                            {{ \Carbon\Carbon::parse($a->release_at)->format('D jS M Y') }}
                        </small>
                        @endif
                    </div>
                    <div class="col-5 text-right">
                        <a href="/articles/{{ urlencode($a->title) }}">
                            Open <i class="fas fa-chevron-circle-right"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>
@else
    <div class="row mt-2">
        <div class="col-12">
        @foreach($articles as $a)
            <div class="row mt-4">
                <div class="col-md-3 col-12">
                    <a href="/articles/{{ urlencode($a->title) }}">
                        <img src="/uploads/articles/{!!$a->getImage()!!}"
                            alt="{{ $a->title }}" style="width: 100%;" />
                    </a>
                </div>
                <div class="col-md-9 col-12 pt-2">
                    <a href="/articles/{{ urlencode($a->title) }}"
                        style="font-size: 1.2rem; font-weight: 600;">
                        {{ $a->title }}
                    </a>
                    <p class="mb-0">{!! $a->description !!}</p>
                    @if($date)
                    <i class="fas fa-calendar"></i>
                    <i>{{ \Carbon\Carbon::parse($a->release_at)->format('D jS M Y') }}</i>
                    @endif
                </div>
            </div>
        @endforeach
        </div>
    </div>
@endif

{!! $articles->links('vendor.pagination.bootstrap-4') !!}