<x-portal-layout>

    <section id="breadcrumbs" class="breadcrumbs">
        <div class="container">
  
            <div class="d-flex justify-content-between align-items-center">
                <h2>Actualités</h2>
                <ol>
                    <li><a href="{{ route('portal.home') }}">Accueil</a></li>
                    <li>Actualités</li>
                </ol>
            </div>
  
        </div>
    </section>
  
    <section id="blog" class="blog">
        <div class="container" data-aos="fade-up">
  
            <div class="row">
  
                <div class="col-lg-8 entries">
                    
                    @foreach($articles as $article)
                    <article class="entry">
        
                        <div class="entry-img">
                            <img src="{{ asset('storage/articles/' . $article->filename) }}" alt="" class="img-fluid">
                        </div>
        
                        <h2 class="entry-title">
                            <a href="{{ route('portal.articles.show', $article) }}">{{ $article->title }}</a>
                        </h2>
        
                        <div class="entry-meta">
                            <ul>
                                <li class="d-flex align-items-center"><i class="bi bi-person"></i> <a href="">{{ $article->author->name }}</a></li>
                                <li class="d-flex align-items-center"><i class="bi bi-clock"></i> <a href=""><time datetime="2020-01-01">{{ $article->formatted_created_at }}</time></a></li>
                                <!--li class="d-flex align-items-center"><i class="bi bi-chat-dots"></i> <a href="">12 Comments</a></li-->
                            </ul>
                        </div>
            
                        <div class="entry-content">
                            <p>
                                {{ $article->chapo }}
                            </p>
                            <div class="read-more">
                                <a href="{{ route('portal.articles.show', $article) }}">Lire la suite More</a>
                            </div>
                        </div>
        
                    </article>
                    @endforeach
    
                    <!--div class="blog-pagination">
                        <ul class="justify-content-center">
                        <li><a href="#">1</a></li>
                        <li class="active"><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        </ul>
                    </div-->
  
                </div>
  
                <div class="col-lg-4">
                    @if(count($posts))
                    <div class="sidebar">
                        <h3 class="sidebar-title">Articles récents</h3>
                        <div class="sidebar-item recent-posts">
                            @foreach($posts as $post)
                            <div class="post-item clearfix">
                                <img src="{{ asset('storage/articles/' . $post->filename) }}" alt="">
                                <h4><a href="{{ route('portal.articles.show', $post) }}">{{ $post->title }}</a></h4>
                                <time datetime="2020-01-01">{{ $post->published_date }}</time>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    @endif
        
                </div>
  
            </div>
  
        </div>
    </section>
  
</x-portal-layout>