@extends('layouts.app')

@section('title', 'Articles')

@section('content')
    <div class="container-fluid background-r">
        <div class="page-top"></div>
        <div class="container py-3">
            <div class="row">
                <div class="col-md-12">
                    <h2 class="text-left mb-2 mt-0 pt-0 pb-0 font-weight-bold">Articles</h2>
                    <div class="progress mt-0 warning-color" style="height: 2px; width: 10%;"></div>

                    <div class="row">
                        @forelse ($articles as $article)
                            <div class="col-md-4 px-md-2">
                                <div class="card border border-light mb-3">
                                    <div class="view overlay">
                                        <img src="{{ asset('img/articles/'.$article->photo) }}" style="height: 240px" class="card-img-top" alt="{{ $article->titre }}">
                                        <a href="{{ route('article.show', $article) }}">
                                            <div class="mask rgba-white-slight"></div>
                                        </a>
                                    </div>
                                    
                                    <div class="card-body">
                                        <h5 class="card-title" style="height: 100px" >
                                            <a href="{{ route('article.show', $article) }}" class="link-text-color-1"><strong>{{ $article->titre }}</strong></a>
                                        </h5>
                                        <hr>
                                        <span class="grey-text">{{ date_format(date_create($article->created_at), "d/m/Y") }}</span>
                                        
                                    </div>
                                </div>

                            </div>
                        @empty
                            <div class="col-lg-12 col-md-12 mb-4 wow fadeIn" data-wow-delay="0.4s">
                                <p>{{"Pas encore d'articles !"}}</p>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@push('scripts')
    <script type="text/javascript">
        
    </script>
@endpush