@extends('layouts.app')
@section('title','Blog - X Hosting BD')
@section('content')
<div class="page-hero">
  <div class="container">
    <h1>Blog & Articles</h1>
    <p>Web hosting tips, tutorials and technology news for Bangladeshi businesses</p>
    <div class="breadcrumb"><a href="/">Home</a> <i class="fas fa-chevron-right" style="font-size:11px"></i> Blog</div>
  </div>
</div>
<section class="blog-page">
  <div class="container">
    <div class="blog-page-grid">
      <div>
        <div class="blog-grid">
          @forelse($posts as $post)
          <article class="blog-card">
            @if($post->featured_image)<div class="blog-img"><img src="{{ asset($post->featured_image) }}" alt="{{ $post->title }}" loading="lazy"></div>
            @else<div class="blog-img blog-img-placeholder"><i class="fas fa-newspaper"></i></div>@endif
            <div class="blog-body">
              <span class="blog-date"><i class="fas fa-calendar"></i> {{ $post->published_at?$post->published_at->format('d M Y'):'' }}</span>
              <h3><a href="{{ route('blog.show',$post->slug) }}">{{ $post->title }}</a></h3>
              <p>{{ Str::limit($post->excerpt??strip_tags($post->content),120) }}</p>
              <a href="{{ route('blog.show',$post->slug) }}" class="read-more">Read More <i class="fas fa-arrow-right"></i></a>
            </div>
          </article>
          @empty<p>No blog posts yet.</p>@endforelse
        </div>
        <div style="margin-top:40px">{{ $posts->links() }}</div>
      </div>
      <aside>
        <div class="sidebar-widget">
          <h4>Categories</h4>
          <div class="sidebar-cat">
            @foreach($categories as $cat)
            <a href="{{ route('blog') }}?cat={{ $cat->slug }}">{{ $cat->name }}<span>{{ $cat->posts_count }}</span></a>
            @endforeach
          </div>
        </div>
      </aside>
    </div>
  </div>
</section>
@endsection