@extends('users/layout')
@section('content')

@if(count($articles)>0)
	<h2 style="text-align: center; font-weight: bold; padding: 20px;">
	LES ARTICLES DISPONIBLES
	</h2>
@else
	<h2 style="text-align: center; font-weight: bold; padding: 20px;">
	PAS D' ARTICLE DISPONIBLE
	</h2>
@endif
             <div class="row col-md-12 row text-center justify-content-center">
             	@foreach($articles as $article)
                 <div class="col-md-3 col-lg-3 py-0 mt-4 mt-lg-0">
                   <div class="card card-height">
                    <img class="card-img-top" style="height: 200px;" src="{{asset($article->articles_image)}}" alt="Card image">
                    <div class="card-body">
                      <p class="" style="text-align: center;">{{ $article->articles_title}}</p>  <hr>
                      <!--  <p class="" style="text-align: center;">...</p> -->
                    </div><br>
                    <center><a href="{{route('articles.detail', $article)}}" class="btn btn-primary">Voir Plus</a><br><br></center>
                  </div><br>
                 </div>
                @endforeach
             </div>

@push('styles')
<style type="text/css">
  .card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Add some padding inside the card container */
.container {
  padding: 2px 16px;
}
</style>
@endpush

@endsection