FrontOffice/src/FrontOffice.Main/Pages/Blog/Index.razor

@attribute [Route(RouteConstants.Blog.Index)]

<PageTitle>بلاگ | کارا بازار سلامت</PageTitle>

@* ═══════════════════════════════════════════════
   BLOG HEADER
   ═══════════════════════════════════════════════ *@
<section class="blog-hero">
    <MudContainer MaxWidth="MaxWidth.Large">
        <div class="text-center">
            <MudText Typo="Typo.h3" Class="dash-hero-name">بلاگ</MudText>
            <MudText Typo="Typo.body1" Class="dash-hero-sub mt-2">
                آخرین مطالب، آموزش‌ها و اخبار کارا بازار سلامت
            </MudText>
        </div>
    </MudContainer>
</section>

@* ═══════════════════════════════════════════════
   SEARCH + FILTERS
   ═══════════════════════════════════════════════ *@
<MudContainer MaxWidth="MaxWidth.Large" Class="py-6">

    <MudPaper Elevation="0" Class="pa-4 rounded-xl mb-6" Style="border:1px solid var(--mud-palette-divider);">
        <MudGrid Spacing="3" AlignItems="AlignItems.Center">
            <MudItem xs="12" sm="6" md="5">
                <MudTextField @bind-Value="_searchTerm"
                              Placeholder="جستجو در مقالات..."
                              Variant="Variant.Outlined"
                              Adornment="Adornment.Start"
                              AdornmentIcon="@Icons.Material.Filled.Search"
                              Immediate="false"
                              OnKeyUp="OnSearchKeyUp"
                              Class="rounded-lg" />
            </MudItem>
            <MudItem xs="12" sm="6" md="5">
                <MudSelect T="long?" Value="_selectedCategoryId"
                           Placeholder="همه دسته‌بندی‌ها"
                           Variant="Variant.Outlined"
                           Class="rounded-lg"
                           Clearable="true"
                           ValueChanged="OnCategoryChanged">
                    @foreach (var cat in _categories)
                    {
                        <MudSelectItem T="long?" Value="@cat.Id">
                            @cat.Title
                            @if (cat.PostCount > 0)
                            {
                                <MudText Typo="Typo.caption" Class="mud-text-secondary mr-2" Style="display:inline;">(@cat.PostCount)</MudText>
                            }
                        </MudSelectItem>
                    }
                </MudSelect>
            </MudItem>
            <MudItem xs="12" md="2">
                <MudButton Variant="Variant.Filled"
                           Color="Color.Primary"
                           FullWidth="true"
                           Class="rounded-lg"
                           StartIcon="@Icons.Material.Filled.Search"
                           OnClick="SearchPosts">
                    جستجو
                </MudButton>
            </MudItem>
        </MudGrid>
    </MudPaper>

    @* ═══════════════════════════════════════════════
       BLOG POSTS GRID
       ═══════════════════════════════════════════════ *@
    @if (_isLoading)
    {
        <LoadingState />
    }
    else if (!_posts.Any())
    {
        <MudPaper Elevation="0" Class="pa-12 text-center rounded-xl" Style="border:1px dashed var(--mud-palette-divider);">
            <MudIcon Icon="@Icons.Material.Outlined.Article" Size="Size.Large" Class="mud-text-secondary mb-3" Style="font-size:3.5rem;" />
            <MudText Typo="Typo.h6" Class="mud-text-secondary">مقاله‌ای یافت نشد</MudText>
            <MudText Typo="Typo.body2" Class="mud-text-secondary mt-1">
                @if (!string.IsNullOrWhiteSpace(_searchTerm) || _selectedCategoryId.HasValue)
                {
                    <span>فیلترها را تغییر دهید یا عبارت دیگری جستجو کنید.</span>
                }
                else
                {
                    <span>به‌زودی مقالات جدید منتشر خواهد شد.</span>
                }
            </MudText>
        </MudPaper>
    }
    else
    {
        <MudGrid Spacing="4">
            @foreach (var post in _posts)
            {
                <MudItem xs="12" sm="6" md="4">
                    <MudPaper Elevation="1" Class="rounded-xl blog-card-v2 cursor-pointer" Style="overflow:hidden;"
                              @onclick="() => NavigateToPost(post.Slug)">
                        @* Thumbnail *@
                        <div class="blog-thumb" style="height:200px; background:#f0f0f0;">
                            @if (!string.IsNullOrWhiteSpace(post.ThumbnailUrl))
                            {
                                <AppImage Path="@post.ThumbnailUrl"
                                          Alt="@post.Title"
                                          ObjectFit="ObjectFit.Cover"
                                          Style="width:100%; height:200px;" />
                            }
                            else
                            {
                                <div style="height:200px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#6366f1,#a78bfa);">
                                    <MudIcon Icon="@Icons.Material.Filled.Article" Size="Size.Large" Style="color:rgba(255,255,255,.4);" />
                                </div>
                            }
                        </div>

                        @* Content *@
                        <div class="pa-4">
                            @if (post.Categories.Any())
                            {
                                <MudChip T="string" Size="Size.Small" Variant="Variant.Outlined"
                                         Color="Color.Primary" Class="mb-2">
                                    @post.Categories.First().Title
                                </MudChip>
                            }

                            <MudText Typo="Typo.h6" Class="mb-1 blog-title-clamp">
                                @post.Title
                            </MudText>

                            @if (!string.IsNullOrWhiteSpace(post.Summary))
                            {
                                <MudText Typo="Typo.body2" Class="mud-text-secondary mb-3 blog-summary-clamp">
                                    @post.Summary
                                </MudText>
                            }

                            <MudStack Row="true" AlignItems="AlignItems.Center" Class="mt-auto">
                                @if (post.PublishedAt.HasValue)
                                {
                                    <MudText Typo="Typo.caption" Class="mud-text-secondary">
                                        <MudIcon Icon="@Icons.Material.Filled.CalendarToday" Size="Size.Small" Class="ml-1" />
                                        @post.PublishedAt.Value.ToString("yyyy/MM/dd")
                                    </MudText>
                                }
                                <MudSpacer />
                                <MudText Typo="Typo.caption" Class="mud-text-secondary">
                                    <MudIcon Icon="@Icons.Material.Filled.Visibility" Size="Size.Small" Class="ml-1" />
                                    @post.ViewCount.ToString("N0")
                                </MudText>
                            </MudStack>
                        </div>
                    </MudPaper>
                </MudItem>
            }
        </MudGrid>

        @* ── Pagination ── *@
        @if (_totalPages > 1)
        {
            <div class="d-flex justify-center mt-8">
                <MudPagination Count="@_totalPages"
                               Selected="@_currentPage"
                               SelectedChanged="OnPageChanged"
                               Color="Color.Primary"
                               Variant="Variant.Outlined"
                               Class="rounded-lg" />
            </div>
        }
    }

</MudContainer>