@extends('web.layouts.app')

@section('content')
    <!-- Breadcrumb Area Start -->
    <div class="breadcrumb__area" style="background-image: url('/web/assets/img/page/breadcrumb.jpg');">
		<div class="container">
			<div class="row">
				<div class="col-xl-12">
					<div class="breadcrumb__area-content">
						<h2>News</h2>
						<ul>
							<li><a href="/">Home</a><i class="fa-regular fa-angle-right"></i></li>
							<li>News</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>       
    <!-- Breadcrumb Area End -->
    <!-- Blog Area Start -->
    <div class="blog-three__columns section-padding-three">
        <div class="container">
			<div class="row">
                @foreach ($allNews as $news)
				<div class="col-xl-4 col-lg-6 wow fadeInUp" data-wow-delay=".4s">
					<div class="blog__one-item">
						<div class="blog__one-item-image">
							<a href="{{ route('news.show', $news->slug) }}"><img src="/storage/{{ $news->image }}" alt="image"></a>
							<div class="blog__one-item-image-date">
								<h6><i class="fa-regular fa-calendar"></i>{{ \Carbon\Carbon::parse($news->published_at)->format('d M') }}</h6>
							</div>
						</div>
						<div class="blog__one-item-content">
							<h4><a href="{{ route('news.show', $news->slug) }}">{{ $news->title }}</a></h4>
							<a class="more_btn" href="{{ route('news.show', $news->slug) }}">Read More<i class="flaticon-right-up"></i></a>
						</div>
					</div>
				</div>
                @endforeach
			</div>
            <div class="row mt-25">
                <div class="col-xl-12">
                    <div class="theme__pagination t-center">
                        <ul>
                            <li><a class="active" href="#">01</a></li>
                            <li><a href="#">02</a></li>
                            <li><a href="#"><i class="far fa-ellipsis-h"></i></a></li>
                            <li><a href="#">05</a></li>
                            <li><a href="#"><i class="fa-regular fa-angle-right"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Blog Area End -->
@endsection