abzarasadi/Pages/Blog/Index.cshtml

@page
@model AsadiTools.Pages.Blog.BlogIndexModel
@{ Layout = "_Layout"; }

<div class="bg-blue-800 text-white py-12 px-4">
    <div class="max-w-6xl mx-auto">
        <nav class="flex items-center gap-2 text-sm text-blue-300 mb-4">
            <a href="/" class="hover:text-white">خانه</a><span>/</span>
            <span class="text-white">بلاگ</span>
        </nav>
        <h1 class="text-3xl font-extrabold mb-2">بلاگ آساد ابزار</h1>
        <p class="text-blue-200">راهنما، نکات فنی و مقالات تخصصی تعمیر ابزار برقی</p>
    </div>
</div>

<div class="max-w-6xl mx-auto px-4 py-10">

    @if (!string.IsNullOrEmpty(Model.Tag))
    {
        <div class="mb-6 flex items-center gap-3">
            <span class="bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-sm font-bold">برچسب: @Model.Tag</span>
            <a href="/blog" class="text-sm text-gray-400 hover:text-gray-600">× حذف فیلتر</a>
        </div>
    }

    @if (!Model.Posts.Any())
    {
        <div class="text-center py-20 text-gray-400">
            <div class="text-5xl mb-4">📝</div>
            <p>مقاله‌ای یافت نشد.</p>
            <a href="/blog" class="text-blue-600 text-sm mt-2 block hover:underline">مشاهده همه مقالات</a>
        </div>
    }
    else
    {
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach (var post in Model.Posts)
            {
                <article class="bg-white rounded-2xl overflow-hidden border border-gray-100 hover:shadow-lg transition-shadow flex flex-col">
                    @if (!string.IsNullOrEmpty(post.FeaturedImage))
                    {
                        <a href="/blog/@post.EffectiveSlug" class="block overflow-hidden" style="height:200px">
                            <img src="@post.FeaturedImage" alt="@post.Title" loading="lazy"
                                 class="w-full h-full object-cover hover:scale-105 transition-transform duration-500" />
                        </a>
                    }
                    <div class="p-5 flex flex-col flex-1">
                        @if (post.TagList.Any())
                        {
                            <div class="flex flex-wrap gap-1.5 mb-3">
                                @foreach (var tag in post.TagList.Take(3))
                                {
                                    <a href="/blog?tag=@Uri.EscapeDataString(tag)"
                                       class="text-xs bg-blue-50 text-blue-600 px-2 py-0.5 rounded-full hover:bg-blue-100 transition-colors">@tag</a>
                                }
                            </div>
                        }
                        <h2 class="font-bold text-lg text-gray-900 mb-2 leading-snug hover:text-blue-700 transition-colors">
                            <a href="/blog/@post.EffectiveSlug">@post.Title</a>
                        </h2>
                        @if (!string.IsNullOrEmpty(post.Excerpt))
                        {
                            <p class="text-sm text-gray-500 leading-7 mb-4 line-clamp-3 flex-1">@post.Excerpt</p>
                        }
                        <div class="flex items-center justify-between mt-auto pt-3 border-t border-gray-50">
                            <span class="text-xs text-gray-400">📅 @post.DisplayDate</span>
                            <a href="/blog/@post.EffectiveSlug"
                               class="text-sm text-blue-600 font-medium hover:underline">ادامه مطلب ›</a>
                        </div>
                    </div>
                </article>
            }
        </div>

        @if (Model.TotalPages > 1)
        {
            <div class="flex justify-center items-center gap-2 mt-10">
                @if (Model.CurrentPage > 1)
                {
                    <a href="/blog?page=@(Model.CurrentPage - 1)@(Model.Tag != null ? "&tag=" + Uri.EscapeDataString(Model.Tag) : "")"
                       class="px-4 py-2 rounded-xl border border-gray-200 text-sm text-gray-600 hover:border-blue-400 hover:text-blue-700 transition-colors">‹ قبلی</a>
                }
                @for (var i = Math.Max(1, Model.CurrentPage - 2); i <= Math.Min(Model.TotalPages, Model.CurrentPage + 2); i++)
                {
                    <a href="/blog?page=@i@(Model.Tag != null ? "&tag=" + Uri.EscapeDataString(Model.Tag) : "")"
                       class="px-4 py-2 rounded-xl border text-sm transition-colors @(i == Model.CurrentPage ? "bg-blue-700 text-white border-blue-700" : "border-gray-200 text-gray-600 hover:border-blue-400")">@i</a>
                }
                @if (Model.CurrentPage < Model.TotalPages)
                {
                    <a href="/blog?page=@(Model.CurrentPage + 1)@(Model.Tag != null ? "&tag=" + Uri.EscapeDataString(Model.Tag) : "")"
                       class="px-4 py-2 rounded-xl border border-gray-200 text-sm text-gray-600 hover:border-blue-400 hover:text-blue-700 transition-colors">بعدی ›</a>
                }
            </div>
        }
    }
</div>