extends /layouts/empty.pug

block pageContent
  .container.mx-auto.px-4.py-8
    article.max-w-4xl.mx-auto
      header.mb-8
        h1.text-4xl.font-bold.mb-4= article.title
        .flex.flex-wrap.items-center.text-gray-600.mb-4
          span.mr-4
            i.fas.fa-calendar-alt.mr-1
            = new Date(article.published_at).toLocaleDateString()
          span.mr-4
            i.fas.fa-eye.mr-1
            = article.view_count + " 阅读"
          if article.reading_time
            span.mr-4
              i.fas.fa-clock.mr-1
              = article.reading_time + " 分钟阅读"
          if article.category
            a.text-blue-600.mr-4(href=`/articles/category/${article.category}` class="hover:text-blue-800")
              i.fas.fa-folder.mr-1
              = article.category
          if article.status === "draft"
            span(class="ml-2 px-2 py-0.5 text-xs bg-yellow-200 text-yellow-800 rounded align-middle") 未发布

        if article.tags
          .flex.flex-wrap.gap-2.mb-4
            each tag in article.tags.split(',')
              a.bg-gray-100.text-gray-700.px-3.py-1.rounded-full.text-sm(href=`/articles/tag/${tag.trim()}` class="hover:bg-gray-200")
                i.fas.fa-tag.mr-1
                = tag.trim()

      if article.featured_image
        .mb-8
          img.w-full.rounded-lg.shadow-lg(src=article.featured_image alt=article.title)

      .prose.prose-lg.max-w-none.mb-8.markdown-content(class="prose-pre:bg-gray-100 prose-pre:p-4 prose-pre:rounded-lg prose-code:text-blue-600 prose-blockquote:border-l-4 prose-blockquote:border-gray-300 prose-blockquote:pl-4 prose-blockquote:italic prose-img:rounded-lg prose-img:shadow-md")
        != article.content

      if article.keywords || article.description
        .bg-gray-50.rounded-lg.p-6.mb-8
          if article.keywords
            .mb-4
              h3.text-lg.font-semibold.mb-2 关键词
              .flex.flex-wrap.gap-2
                each keyword in article.keywords.split(',')
                  span.bg-white.px-3.py-1.rounded-full.text-sm= keyword.trim()
          if article.description
            h3.text-lg.font-semibold.mb-2 描述
            p.text-gray-600= article.description

      if relatedArticles && relatedArticles.length
        section.border-t.pt-8.mt-8
          h2.text-2xl.font-bold.mb-6 相关文章
          .grid.grid-cols-1.gap-6(class="md:grid-cols-2")
            each related in relatedArticles
              .bg-white.shadow-md.rounded-lg.overflow-hidden
                if related.featured_image
                  img.w-full.h-48.object-cover(src=related.featured_image alt=related.title)
                .p-6
                  h3.text-xl.font-semibold.mb-2
                    a(href=`/articles/${related.slug}` class="hover:text-blue-600")= related.title
                  if related.excerpt
                    p.text-gray-600.text-sm.mb-4= related.excerpt
                  .flex.justify-between.items-center.text-sm.text-gray-500
                    span
                      i.fas.fa-calendar-alt.mr-1
                      = new Date(related.published_at).toLocaleDateString()
                    if related.category
                      a.text-blue-600(href=`/articles/category/${related.category}` class="hover:text-blue-800")= related.category