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

@page "/blog/{Slug}"

<PageTitle>@(_post?.Title ?? "مقاله") | بلاگ</PageTitle>

@if (_isLoading)
{
    <MudContainer MaxWidth="MaxWidth.Medium" Class="py-12">
        <LoadingState />
    </MudContainer>
}
else if (_post == null)
{
    <MudContainer MaxWidth="MaxWidth.Medium" Class="py-12">
        <EmptyState Icon="@Icons.Material.Filled.SearchOff"
                    Title="مقاله یافت نشد"
                    Description="این مقاله حذف شده یا آدرس اشتباه است."
                    ActionText="بازگشت به بلاگ"
                    ActionHref="/blog" />
    </MudContainer>
}
else
{
    @* ═══ Featured Image Header ═══ *@
    @if (!string.IsNullOrWhiteSpace(_post.FeaturedImagePath))
    {
        <div class="blog-detail-hero">
            <AppImage Path="@_post.FeaturedImagePath"
                      Alt="@_post.Title"
                      ObjectFit="ObjectFit.Cover"
                      Style="width:100%; height:100%;" />
            <div class="blog-detail-hero-overlay"></div>
        </div>
    }

    <MudContainer MaxWidth="MaxWidth.Medium" Class="py-6">
        @* ── Breadcrumb ── *@
        <MudStack Row="true" Spacing="1" AlignItems="AlignItems.Center" Class="mb-4">
            <MudLink Href="/" Typo="Typo.caption" Class="mud-text-secondary">خانه</MudLink>
            <MudIcon Icon="@Icons.Material.Filled.ChevronLeft" Size="Size.Small" Class="mud-text-secondary" />
            <MudLink Href="/blog" Typo="Typo.caption" Class="mud-text-secondary">بلاگ</MudLink>
            <MudIcon Icon="@Icons.Material.Filled.ChevronLeft" Size="Size.Small" Class="mud-text-secondary" />
            <MudText Typo="Typo.caption" Class="mud-text-secondary">@_post.Title</MudText>
        </MudStack>

        @* ── Article Header ── *@
        <MudPaper Elevation="0" Class="pa-0 mb-6">
            @if (_post.Categories.Any())
            {
                <MudStack Row="true" Spacing="1" Class="mb-3 flex-wrap">
                    @foreach (var cat in _post.Categories)
                    {
                        <MudChip T="string" Size="Size.Small" Variant="Variant.Filled"
                                 Color="Color.Primary" Class="rounded-pill"
                                 OnClick="() => NavigateToCategoryFilter(cat.Id)">
                            @cat.Title
                        </MudChip>
                    }
                </MudStack>
            }

            <MudText Typo="Typo.h4" Class="mb-3 fw-bold" Style="line-height:1.6;">
                @_post.Title
            </MudText>

            @if (!string.IsNullOrWhiteSpace(_post.Summary))
            {
                <MudText Typo="Typo.subtitle1" Class="mud-text-secondary mb-4" Style="line-height:1.8;">
                    @_post.Summary
                </MudText>
            }

            <MudStack Row="true" Spacing="3" AlignItems="AlignItems.Center" Class="mb-4 flex-wrap">
                @if (_post.PublishedAt.HasValue)
                {
                    <MudStack Row="true" Spacing="1" AlignItems="AlignItems.Center">
                        <MudIcon Icon="@Icons.Material.Filled.CalendarToday" Size="Size.Small" Color="Color.Primary" />
                        <MudText Typo="Typo.body2" Class="mud-text-secondary">
                            @_post.PublishedAt.Value.ToString("yyyy/MM/dd")
                        </MudText>
                    </MudStack>
                }
                <MudStack Row="true" Spacing="1" AlignItems="AlignItems.Center">
                    <MudIcon Icon="@Icons.Material.Filled.Visibility" Size="Size.Small" Color="Color.Primary" />
                    <MudText Typo="Typo.body2" Class="mud-text-secondary">
                        @_post.ViewCount.ToString("N0") بازدید
                    </MudText>
                </MudStack>
            </MudStack>

            <MudDivider Class="mb-6" />
        </MudPaper>

        @* ── Article Content ── *@
        <MudPaper Elevation="0" Class="blog-content mb-8">
            @((MarkupString)_post.HtmlContent)
        </MudPaper>

        @* ── Tags ── *@
        @if (_post.Tags.Any())
        {
            <MudDivider Class="mb-4" />
            <MudStack Row="true" Spacing="1" AlignItems="AlignItems.Center" Class="mb-6 flex-wrap">
                <MudIcon Icon="@Icons.Material.Filled.LocalOffer" Size="Size.Small" Class="mud-text-secondary ml-2" />
                @foreach (var tag in _post.Tags)
                {
                    <MudChip T="string" Size="Size.Small" Variant="Variant.Outlined"
                             Class="rounded-pill">
                        @tag.Title
                    </MudChip>
                }
            </MudStack>
        }

        @* ── Back to Blog ── *@
        <div class="text-center mt-6 mb-4">
            <MudButton Variant="Variant.Outlined" Color="Color.Primary" OnClick="GoBack"
                       Class="rounded-pill" StartIcon="@Icons.Material.Filled.ArrowForward">
                بازگشت به بلاگ
            </MudButton>
        </div>
    </MudContainer>
}