extends /layouts/empty.pug

block pageHead
  +css('css/page/index.css')
  +css('https://unpkg.com/tippy.js@5/dist/backdrop.css')
  +js("https://unpkg.com/popper.js@1")
  +js("https://unpkg.com/tippy.js@5")
  
mixin item(url, desc)
  a(href=url target="_blank" class="inline-flex items-center text-[16px] p-[10px] rounded-[10px] shadow") 
    block 
    .material-symbols-light--info-rounded(data-tippy-content=desc)

mixin card(blog)
  .article-card(class="bg-white rounded-[12px] shadow p-6 transition hover:shadow-lg border border-gray-100")
    h3.article-title(class="text-lg font-semibold text-gray-900 mb-2") 
      a(href="/article/1" class="hover:text-blue-600 transition-colors duration-200") #{blog.title}
    p.article-meta(class="text-sm text-gray-400 mb-3 flex")
      span(class="mr-2 line-clamp-1" title=blog.author)
        span 作者：
        a(href=blog.author class="hover:text-blue-600 transition-colors duration-200") #{blog.author}
      span(class="mr-2 whitespace-nowrap")
        span | 
        a(href=blog.updated_at.slice(0, 10) class="hover:text-blue-600 transition-colors duration-200") #{blog.updated_at.slice(0, 10)}
      span(class="mr-2 whitespace-nowrap")
        span | 分类：
        a(href=blog.category class="hover:text-blue-600 transition-colors duration-200") #{blog.category}
    p.article-desc(
      class="text-gray-600 text-base mb-4 line-clamp-2"
      style="height: 2.8em; overflow: hidden;"
    )
      | #{blog.description}
    a(href="/article/1" class="inline-block text-sm text-blue-600 hover:underline transition-colors duration-200") 阅读全文 →

mixin empty()
  .div-placeholder(class="h-[100px] w-full bg-gray-100 text-center flex items-center justify-center text-[16px]")
    block

block pageContent
  div(class="mt-[20px]")
    h2(class="text-[20px] font-bold mb-[10px]") 接口列表
    if apiList && apiList.length > 0
      .api.list 
        each api in apiList
          +item(api.url, api.desc) #{api.name}
    else
      +empty() 空
  div(class="mt-[20px]")
    h2(class="text-[20px] font-bold mb-[10px]") 文章列表
    if blogs && blogs.length > 0
      .blog.list
        each blog in blogs
          +card(blog)
    else
      +empty() 文章数据为空
  div(class="mt-[20px]")
    h2(class="text-[20px] font-bold mb-[10px]") 收藏列表
    if collections && collections.length > 0
      .blog.list
        each collection in collections
          +card(collection)
    else
      +empty() 收藏列表数据为空

block pageScripts
  script.
    tippy('[data-tippy-content]');