@extends('layouts.frontend.main')
@section('title','Actualités')
@section('styles')
    @include('pages.frontend.components.news_styles_links')
@endsection
@section('body')

    <!-- Page Header Start -->
    <div class="page-header">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <h2>Actualité</h2>
                </div>
                <div class="col-12">
                    <a href="{{url('/')}}">Accueil</a>
                    <a href="{{url('/news')}}">Actualité</a>
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header End -->


    <!-- Blog Start -->
    <div class="blog">
        <div class="container">
            <div class="section-header text-center">
                <p>Notre Actualité</p>
                <h2>Dernière Nouveautés </h2>
            </div>
            <div class="row blog-page">
                @foreach($news as $new)
                    <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.2s">
                        <div class="blog-item">
                            <div class="blog-img">
                                <img src="{{asset('storage/backend/images/news/' .$new->file)}}" alt="Image">
                            </div>
                            <div class="blog-title">
                                <h3>{{$new->title}}</h3>
                                <a class="btn" href="{{ route('news-details', $new->id) }}">+</a>
                            </div>
                            <div class="blog-meta">

                            </div>
                            <div class="blog-text">
                                <p>
                                    {!! Str::words($new->content, 20) !!}
                                </p>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="row">
                <div class="col-12">
                    <ul class="pagination justify-content-center">
                        <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item active"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item"><a class="page-link" href="#">Next</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- Blog End -->


@endsection
@section('scripts')
    @include('pages.frontend.components.news_scripts_links')
@endsection