@extends('layouts.frontend')

@section('title')
	{{$category['name']}} | Blog |
@endsection

@section('meta-description')
	{{\Illuminate\Support\Str::limit(strip_tags($category['description']), 150, '...')}}
@endsection
@section('meta-title')
	{{$category['title']}}
@endsection
@section('meta-og-url')
	{{url()->full()}}
@endsection
@section('meta-og-image')
	{{'https://cdn.stevenhardy.digital/steven-photos/' . $category['featured_image']}}
@endsection

@section('background-image')
	{{'https://cdn.stevenhardy.digital/steven-photos/' . $category['featured_image']}}
@endsection

@section('page_title')
	{{$category['title']}}
@endsection

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