@extends('frontend.layouts.master')

@section('title', 'News')

@section('content')

				@php $header_image = \App\Models\Site\Header\Image::inRandomOrder()->first(); @endphp

				<section class="module-header parallax {{ $header_image->css }}" data-background="{{ $header_image->imageURL }}">
					<div class="container">
						<div class="row">
							<div class="col-md-12 text-left">
								<h1 class="h1">News Articles</h1>
								<p>The thoughts and opinions of our staff.</p>
							</div>
						</div>
					</div>
				</section>
				<section class="module">
					<div class="container">
						<div class="row">
							<div class="col-lg-8">

								@foreach($articles as $article)

									<article class="post">
										<div class="post-preview"><a href="{{ route('frontend.article.show', $article->slug) }}"><img src="{{ $article->image_full_url }}" alt="{{ $article->subject }}"></a></div>
										<div class="post-wrapper">
											<div class="post-header">
												<h2 class="post-title"><a href="{{ route('frontend.article.show', $article->slug) }}">{{ $article->subject }}</a></h2>
												<ul class="post-meta h5">
													<li><i class="fa fa-clock-o"></i> {{ $article->created_at->diffForHumans() }}</li>
													<li><i class="fa fa-user"></i> <a href="{{ route('frontend.user.show', $article->user_id) }}">{{ $article->user->name }}</a></li>
													<li><i class="fa fa-folder-open"></i> <a href="{{ route('frontend.article.category.show', $article->category->slug) }}">{{ $article->category->name }}</a></li>
													<li><i class="fa fa-comments"></i> {{ $article->comments->count() }} Comments</li>
												</ul>
											</div>
											<div class="post-content">
												<p>{{ str_limit($article->body, 300) }}</p>
											</div>
											<div class="post-more"><a class="btn btn-brand" href="{{ route('frontend.article.show', $article->slug) }}">Read more →</a></div>
										</div>
									</article>

								@endforeach

								{{ $articles->links('frontend.layouts.partials.pagination') }}

							</div>
							<div class="col-lg-4">

								@include('frontend.article.partials.sidebar')

							</div>
						</div>
					</div>
				</section>

@endsection