@page "/blog/{slug}"
@model SoroushAsadi.Pages.Blog.PostModel
@{
    ViewData["Title"] = Model.Title + " - Soroush Asadi";
    var fa = Model.IsFa;
}

<div class="px-5 pt-28 pb-24 sm:px-8 sm:pt-32">
  <div class="mx-auto max-w-2xl">
    <a href="/blog" class="mb-10 inline-flex items-center gap-2 text-sm text-zinc-500 transition-colors hover:text-zinc-900 @(fa ? "flex-row-reverse" : "")">
      <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" class="@(fa ? "" : "rotate-180")"><path d="M5 12H19"/><path d="M13 6L19 12L13 18"/></svg>
      @(fa ? "بازگشت به بلاگ" : "Back to blog")
    </a>

    @if (Model.PostNotFound)
    {
      <p class="text-zinc-600">@(fa ? "مقاله پیدا نشد." : "Post not found.")</p>
    }
    else
    {
      <header class="mb-8">
        <span class="kicker">@Model.Category</span>
        <h1 class="mt-3 @(fa ? "font-fa" : "")" style="font-size:clamp(1.8rem,4vw,2.5rem)">@Model.Title</h1>
        <p class="mt-3 text-sm text-zinc-500">@Model.ReadTime @(fa ? "دقیقه مطالعه" : "min read")</p>
      </header>

      <article class="prose-custom">
        @Html.Raw(Model.BodyHtml)
      </article>
    }
  </div>
</div>