@extends('layouts.front')
@section('title', 'الوسم: ' . $tag->name)

@section('breadcrumbs')
<nav class="text-sm text-slate-500 dark:text-slate-400 mb-6 flex flex-wrap items-center gap-1">
  <a href="/" class="hover:text-primary">الرئيسية</a>
  <span>/</span>
  <span class="text-slate-700 dark:text-slate-200">وسم: {{ $tag->name }}</span>
</nav>
@endsection

@section('content')
<section class="max-w-6xl mx-auto">
  {{-- 🏷️ عنوان الوسم --}}
  <div class="mb-8 text-center">
    <h1 class="text-3xl font-extrabold text-slate-900 dark:text-white">
      <i class="fas fa-hashtag text-primary"></i> {{ $tag->name }}
    </h1>
    <p class="text-slate-500 dark:text-slate-400 mt-2">
      عرض المقالات المرتبطة بهذا الوسم
    </p>
  </div>

  {{-- 📰 شبكة المقالات --}}
  @if($posts->count())
    <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
      @foreach($posts as $p)
        @include('front.partials.post-card', ['post' => $p])
      @endforeach
    </div>

    {{-- 🔁 ترقيم الصفحات --}}
    <div class="mt-10">
      {{ $posts->links() }}
    </div>
  @else
    {{-- ⚠️ لا توجد مقالات --}}
    <div class="bg-yellow-50 dark:bg-slate-800/50 border border-yellow-200 dark:border-slate-700 text-yellow-800 dark:text-yellow-300 rounded-2xl p-6 text-center shadow-sm">
      <i class="fas fa-tag text-3xl mb-3 text-yellow-500"></i>
      <p class="font-semibold text-lg">لا توجد مقالات تحت هذا الوسم حالياً.</p>
      <p class="text-sm text-gray-500 mt-2">عُد لاحقاً لمتابعة أحدث المقالات المرتبطة به.</p>
    </div>
  @endif
</section>
@endsection