@extends('layouts.app')

@section('title', $article->titre)

@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-8">
                    @include('articles.article')
                </div>

                <div class="col-md-4">
                    <!-- Derniers articles -->
                    <h5 class="text-left mb-2 font-weight-bold">Derniers articles</h5>
                    <div class="progress mt-0 bg-color-1" style="height: 2px; width: 10%;"></div>
                    <div class="card border border-light mb-3">
                        <div class="card-body p-3">
                            @forelse ($articles as $article)
                                <div class="media mb-3">
                                    <a href="{{ route('article.show', $article) }}">
                                        <img class="d-flex mr-3" src="{{ asset('img/articles/'.$article->photo) }}" alt="" style="height: 60px; width:80px">
                                    </a>
                                    <div class="media-body">
                                        <a href="{{ route('article.show', $article) }}" class="link-text-color-black">
                                            <span class="mt-0 font-weight-bold">{{ $article->titre }}</span>
                                        </a>
                                    </div>
                                </div>
                            @empty
                                <p>{{"Pas encore d'articles !"}}</p>
                            @endforelse
                            
                            @if(count($articles))
                                <div class="row">
                                    <div class="col-12">
                                        <a href="{{ route('article.all') }}" class="link-text-color-1">Voir plus
                                        <i class="fa fa-angle-double-right" aria-hidden="true"></i>
                                        </a>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


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