@extends('layout')
@section('content')        
        <div class="container container-flex">
            <main role="main">                
                @foreach($data as $blog)    
                <article class="article-recent">
                    <div class="article-recent-main">
                        <h2 class="article-title">{{$blog['title']}} </h2>
                        <p class="article-body">{{$blog['content']}}</p>
                        <a href="/show/{{$blog['id']}}" class="article-read-more">CONTINUE READING</a>
                    </div>
                    <div class="article-recent-secondary">
                        <img src="img/{{$blog['image']}}" alt="Blog Image {{$blog['id']}}" class="article-image">
                        <p class="article-info">{{\Carbon\Carbon::parse($blog['post_date'])->format('d F Y')}}</p>
                    </div>
                </article>
                @endforeach   
            </main>
            
            <aside class="sidebar">
                
                <div class="sidebar-widget">
                    <h2 class="widget-title">ABOUT ME</h2>
                    <img src="img/about-me.jpg" alt="john doe" class="widget-image">
                    <p class="widget-body">I find life better, and I'm happier, when things are nice and simple.</p>
                </div>
                
                <div class="sidebar-widget">
                    <h2 class="widget-title">RECENT POSTS</h2>
                    @foreach($data as $blog)
                    <div class="widget-recent-post">
                        <h3 class="widget-recent-post-title">{{$blog['title']}}</h3>
                        <img src="img/{{$blog['image']}}" alt="Blog Image {{$blog['id']}}" class="widget-image">
                    </div>
                    @endforeach
                </div>                
            </aside>            
        </div>
@endsection