@extends('layouts.base')

@push('page_title')
	{{ __('News')}}
@endPush

@section('content')
    <!-- section -->
	<section class="slider slider-banner">
		<!-- #slider-banner -->
		<div id="slider-banner" class="carousel slide" data-bs-ride="carousel">
			<!-- .carousel-inner -->
			<div class="carousel-inner">
				<!-- .carousel-item -->
				<div class="carousel-item active lozad" data-background-image="{{ asset("assets/img/blog/banner.jpg") }}">
					<!-- .container -->
					<div class="container h-100 carousel-content">
						<!-- .row -->
						<div class="row align-items-center h-100">
							<!-- .col -->
							<div class="col-md-6">
								<h1><strong>News</strong></h1>
								<p>Neque porro quisquam est qui dolorem</p>
							</div>
						</div>
					</div>					
				</div>
			</div>
		</div>
	</section>
	
	<!-- .blog-large-area -->
	@if (count($news) > 0)
		<section id="blog-area" class="blog-large-area">
			<!-- .container -->
			<div class="container">
				<!-- .row -->
				<div class="row">
					<!-- .col -->
					<div class="col-md-8">
						<!-- .blog-post -->
						<div class="blog-post">

							@foreach ($news as $value)
								<!-- .single-blog-item -->
								<div class="single-blog-item">
									<!-- .img-holder -->
									<div class="img-holder">
										<img src="{{ $value->image_file }}" loading="lazy" alt="">
										
										<!-- .overlay-style-one -->
										<div class="overlay-style-one">
											<!-- .box -->
											<div class="box">
												<!-- .content -->
												<div class="content">
													<a href="{{ route('news.view', $value->permalink) }}"><i class="fal fa-plus fa-2x"></i></a>
												</div>
											</div>
										</div>
									</div>
									
									<!-- .text-holder -->
									<div class="text-holder">
										<h3 class="blog-title"><a href="{{ route('news.view', $value->permalink) }}">{{ $value->title }}</a></h3>
										
										<!-- .text -->
										<div class="text">
											<p>{{ $value->excerpt }}</p>
										</div>
										
										<!-- .meta-info -->
										<ul class="meta-info">
											<li><a href="#"><i class="fa fa-calendar" aria-hidden="true"></i>{{ $value->date_format }}</a></li>
											<li><a href="{{ route('news.category', $value->category_permalink) }}"><i class="fa fa-folder-open" aria-hidden="true"></i>{{ $value->category->name }}</a></li>
											{{-- <li class="hidden"><a href="#"><i class="fa fa-user" aria-hidden="true"></i>Mark Nicholes</a></li> --}}
										</ul>
									</div>    
								</div>
							@endforeach

							<div class="d-flex justify-content-end">
								{{ $news->links() }}
							</div>
						</div>    
					</div>
				</div>
			</div>
		</section> 
	@endif
@endsection