{{define "archive_docs_index"}}
<div class="archive-page">
  <!-- 馆藏铭牌 Hero -->
  <header class="archive-hero">
    <div class="archive-hero-card">
      <span class="archive-hero-mark">{{ico "book"}}</span>
      <p class="archive-hero-eyebrow">ARCHIVE · 典藏馆</p>
      <h1 class="archive-hero-title">{{if .Data.Category}}「{{.Data.Category}}」馆藏{{else}}整座典藏馆，等你抽一本{{end}}</h1>
      <p class="archive-hero-sub">{{if .Data.Category}}这一架共 {{.Data.Total}} 本藏本，全文即点即读，不收一分钱、不弹一条广告。{{else}}架上 {{.Data.Total}} 本藏本，全文即点即读——<b>书不是用来陈列的，是用来翻的</b>。{{end}}</p>
      <dl class="archive-hero-stats">
        <div><dt>在架藏本</dt><dd>{{.Data.Total}}</dd></div>
        <div><dt>累计翻阅</dt><dd>{{.Data.TotalViews}}</dd></div>
        <div><dt>随手记</dt><dd>{{.Data.TotalNotes}}</dd></div>
      </dl>
    </div>
  </header>

  <!-- 分类书架导航 -->
  <div class="mod-tabs archive-tabs">
    <a class="mod-tab {{if eq .Data.Category ""}}active{{end}}" href="/docs">全部书架<em>{{.Data.Total}}</em></a>
    {{range .Data.Categories}}
    <a class="mod-tab {{if eq $.Data.Category .Name}}active{{end}}" href="{{.Href}}">{{.Name}}<em>{{.Count}}</em></a>
    {{end}}
  </div>

  <!-- 入藏登记：投稿区 -->
  <section class="archive-acquire">
    <h3 class="archive-acquire-title">{{ico "book"}} 登记一本新藏本</h3>
    {{if .Data.Err}}<div class="book-post-err">{{.Data.Err}}</div>{{end}}
    {{if .Data.CurrentUser}}
    <form method="post" action="/docs/publish">
      <p class="book-post-who">以 <b>{{.Data.CurrentUser}}</b> 的书友身份投稿</p>
      <div class="book-post-row">
        <input type="text" name="title" placeholder="藏本的名字（标题）" maxlength="60" required>
        <select name="category" required>
          <option value="">放到哪座书架…</option>
          {{range .Data.Categories}}<option value="{{.Name}}">{{.Name}}</option>{{end}}
        </select>
      </div>
      <input type="text" name="summary" placeholder="一句话说出这本书好在哪（摘要）" maxlength="120" required>
      <textarea name="content" data-zx-editor data-upload="/blog/upload" placeholder="正文写在这里——把想分享的知识、故事、教程讲完整（支持 Markdown）" rows="5" maxlength="50000" required></textarea>
      <div class="book-post-foot">
        <span class="book-post-hint">{{ico "spark"}} 认真写的藏本会有人翻、有人记，热读度会替你说话。</span>
        <button class="btn btn-primary" type="submit">登记入藏</button>
      </div>
    </form>
    {{else}}
    <div class="book-post-login">
      <span>登录后即可投稿，把你知道的好东西分享给整个书架。</span>
      <a class="btn btn-primary btn-sm" href="/admin/login">去登录</a>
    </div>
    {{end}}
  </section>

  <!-- 馆藏目录：索书卡式文档列表 -->
  <div class="archive-list-head">
    <span>{{ico "book"}} 馆藏目录 · 按上架时间排开</span>
    <span class="archive-list-head-note">每张索书卡都可免费抽阅</span>
  </div>
  <div class="archive-shelf">
    {{range .Data.Docs}}
    <article class="archive-card">
      <a class="archive-card-cover" href="/docs/{{.Slug}}" style="--book-hue: {{.Hue}}">
        <span class="archive-card-cat">{{.Category}}</span>
        <span class="archive-card-title">{{.Title}}</span>
        <span class="archive-card-mark">典藏馆 · 藏本</span>
      </a>
      <div class="archive-card-body">
        <div class="archive-card-topline">
          <a class="archive-card-catlink" href="{{.CatHref}}">{{.Category}}</a>
          <span class="book-stars" title="质量星标 {{.Stars}}/5">{{.StarsText}}</span>
        </div>
        <h2 class="archive-card-title2"><a href="/docs/{{.Slug}}">{{.Title}}</a></h2>
        <p class="archive-card-summary">{{if .Summary}}{{.Summary}}{{else}}{{truncate .Content 90}}{{end}}</p>
        <div class="archive-card-foot">
          <span class="archive-card-heat">{{ico "fire"}} 热读 {{.Views}}</span>
          <span class="archive-card-notes">{{ico "pen"}} 随手记 {{.NotesCount}}</span>
          <a class="archive-card-read" href="/docs/{{.Slug}}">抽阅 →</a>
        </div>
      </div>
    </article>
    {{else}}
    <div class="mod-empty" style="grid-column:1/-1;">
      <h3>这架还空着</h3>
      <p>{{if .Data.Category}}这座书架还没上架藏本，去别的书架逛逛吧。{{else}}书架还没上架藏本，先去后台写一本吧。{{end}}</p>
    </div>
    {{end}}
  </div>
  {{template "pagination" .}}

  <!-- 借阅热榜 -->
  <section class="archive-panel">
    <h3 class="mod-panel-title">{{ico "fire"}} 借阅榜 <span style="font-weight:400;font-size:12.5px;color:var(--muted);">最近翻得最多的 5 本</span></h3>
    {{if .Data.HotDocs}}
    <ol class="archive-rank">
      {{range $i, $h := .Data.HotDocs}}
      <li class="archive-rank-item">
        <a href="/docs/{{$h.Slug}}">
          <span class="archive-rank-num">{{add $i 1}}</span>
          <span class="archive-rank-title">{{$h.Title}}</span>
          <span class="archive-rank-views">{{$h.Views}} 阅</span>
        </a>
      </li>
      {{end}}
    </ol>
    {{else}}
    <div class="mod-empty" style="padding:20px;">典藏馆刚开馆，还没人翻过书。</div>
    {{end}}
    <p class="archive-poem" style="margin:12px 0 0;">有人读的书，才有温度。这座典藏馆的温度，全靠你们一页页翻出来。</p>
  </section>
  {{template "module_meta" .}}
</div>
{{end}}