@extends('layouts.frontend')

@section('title')
    All Blog Posts |
@endsection

@section('page_title')
    All Blog Posts
@endsection

@section('page_subheading')
    View all of the articles written by Photographs by Steven. From animal general knowledge to photography tips, follow to find out more!
@endsection

@section('meta-description')
    View all of the articles written by Photographs by Steven. From animal general knowledge to photography tips, follow to find out more!
@endsection
@section('meta-title')
    View all posts
@endsection
@section('meta-og-url')
    {{url()->full()}}
@endsection
@section('meta-og-image')
    https://cdn.stevenhardy.digital/steven-photos/website-images/all-posts-header.jpg
@endsection

@section('background-image')
    https://cdn.stevenhardy.digital/steven-photos/website-images/all-posts-header.jpg
@endsection

@section('content')
    <div class="container">
        <div class="row" id="all-posts">
            @foreach($posts as $recent)
                <div class="col-xs-12 col-md-6 col-lg-4 col-xl-4 animal-section mb-4">
                    <div class="blog-imgs">
                        <a href="/post/{{$recent->slug}}"><img src="https://cdn.stevenhardy.digital/steven-photos/{{$recent->thumbnail}}" alt="{{$recent->title}}" class="blog-img" loading="lazy"></a>
                    </div>
                    <div class="blog-title-heading" >
                        <p class="category">{{$recent->category->name}}</p>
                        <h2 class="Gorillas-Chimpanzees">{{$recent->title}}</h2>
                        <p class="blog-paragraph">{!!\Illuminate\Support\Str::limit(strip_tags($recent['content']), 200, '...')!!}</p>
                        <span class="steven-name"><i class="fa fa-user"></i> By {{$recent->user->name}} <i class="fa fa-calendar"></i> {{date('F d, Y', strtotime($recent->updated_at))}}</span><br>
                        <a href="/post/{{$recent->slug}}"><button type="button" class="btn btn-success" id="read-more-button">See the full picture</button></a>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@endsection