@extends('layouts.default')
@section('title', 'Tag')
@section('description', 'Read about ecommerce development Blog entries at Synamens official blog.Better Blog. Better Ideas. Better Business')
@section('keywords', 'Ecommerce Development Blogs')

@section('content')
<section class="bg-[url('/assets/img/blog-innerbgs.webp')] bg-no-repeat bg-fixed bg-[center_top_-8rem] bg-center">
    <div class="container">
        <div class="text-center">
            <h3 class="text-4xl	font-medium	py-7 sm:py-12 md:py-16 lg:py-16 text-white aligncenter wow fadeInUp" data-wow-delay="0.1s">Blog</h3>
        </div>
    </div>
</section>
<section class="py-14">
    <div class="container">
        <div class="flex flex-wrap wow fadeInUp" data-wow-delay="0.2s">
            <div class="w-full sm:w-9/12 sm:pr-4 md:w-9/12 md:pr-4 lg:w-9/12 lg:pr-10">
                @foreach($tagPosts as $blog)
                <div class="pb-10">
                    @if(!empty($blog->featured_image))
                    <div class="mb-5">
                        <img src="{{ asset('images/blogpost-img/'.$blog->featured_image) }}" width="820" height="200" alt="{{ $blog->slug }}">
                    </div>
                    @endif
                    <p class="">{{ date('d M Y', strtotime($blog->published_at)) }}</p>
                    <h1 class="text-xl font-medium tracking-tight hover:text-[#9cc012] cursor-pointer"><a href="{{ url('blog/'.$blog->slug) }}">{{ $blog->title }}</a></h1>
                    <div class="text-sm mt-3.5 text-justify tracking-wider leading-6">
                        {{ Str::limit(strip_tags(html_entity_decode($blog->content)),600) }}
                        <p class="mt-4"><span>Tags:</span>
                            @foreach($blog->blogTag as $b)
                            <a class="hover:text-[#9cc012] capitalize" href="{{ url('tag',$b->slug) }}">{{ $b->name }}</a>, 
                            @endforeach
                        </p>
                    </div> 
                </div>   
                @endforeach
            </div>
            <div class="w-full sm:w-3/12 md:w-3/12 lg:w-3/12 lg:px-4">
                @include('includes.blog-archives')
            </div>    
        </div>
    </div>
</section>
@endsection