{{define "docs_index"}}
  <div class="thm-docs">
  <!-- ===== 场景 Hero：整面书架墙（靛蓝渐变玻璃 + 书脊剪影 + 层板） ===== -->
  <header class="shelf-hero">
    <div class="shelf-hero-bg" aria-hidden="true">
      <span class="shelf-stack">
        <i style="--sh:70%"></i><i style="--sh:88%"></i><i style="--sh:58%"></i><i style="--sh:94%"></i><i style="--sh:76%"></i><i style="--sh:64%"></i><i style="--sh:90%"></i><i style="--sh:52%"></i><i style="--sh:82%"></i><i style="--sh:68%"></i><i style="--sh:86%"></i><i style="--sh:74%"></i><i style="--sh:60%"></i><i style="--sh:92%"></i>
      </span>
      <span class="shelf-ledge"></span>
    </div>
    <h1 class="shelf-title">{{if .Data.Category}}「{{.Data.Category}}」· 这一架的好书{{else}}整面墙的好书，等你抽一本{{end}}</h1>
    <p class="shelf-line">{{if .Data.Category}}共 {{.Data.Total}} 本藏本，全文即点即读，不收一分钱、不弹一条广告。{{else}}架上 {{.Data.Total}} 本藏本，全文即点即读——<b>书不是用来陈列的，是用来翻的</b>。{{end}}</p>
    <div class="shelf-card">
      <div class="sc-head">
        <span>借 阅 卡</span>
        <em>{{if .Data.Category}}{{.Data.Category}}{{else}}全 部 书 架{{end}}</em>
      </div>
      <dl class="sc-rows">
        <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">
    <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>

  <!-- 投稿区：登录书友把自己的藏本摆上书架 -->
  <div class="book-post">
    <h3 class="book-post-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}}
  </div>

  <!-- 书架墙：藏本像从架上抽出的书 -->
  <div class="shelf-grid-head">
    <span>{{ico "book"}} 按上架时间排开 · 每本都可免费抽阅</span>
    <span class="shelf-grid-head-note">把鼠标放到书封上，就能把书从架上抽出来</span>
  </div>
  <div class="mod-grid">
    {{range .Data.Docs}}
    <article class="book-card" style="padding:0;overflow:hidden;">
      <a class="book-cover" href="/docs/{{.Slug}}" style="--book-hue: {{.Hue}}">
        <span class="book-spine-tag">{{.Category}}</span>
        <span class="book-cover-title">{{.Title}}</span>
        <span class="book-cover-meta">晴空书架 · 藏本</span>
      </a>
      <div class="book-body">
        <div class="book-topline">
          <a class="book-cat" href="{{.CatHref}}">{{.Category}}</a>
          <span class="book-stars" title="质量星标 {{.Stars}}/5">{{.StarsText}}</span>
        </div>
        <h2 class="book-title"><a href="/docs/{{.Slug}}">{{.Title}}</a></h2>
        <p class="book-summary">{{if .Summary}}{{.Summary}}{{else}}{{truncate .Content 90}}{{end}}</p>
        <div class="book-foot">
          <span class="book-heat">{{ico "fire"}} 热读 {{.Views}}</span>
          <span class="book-notes">{{ico "pen"}} 随手记 {{.NotesCount}}</span>
          <a class="book-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" .}}

  <!-- 热读榜：有人读的书才有温度 -->
  <div class="mod-panel shelf-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="temp-list">
      {{range $i, $h := .Data.HotDocs}}
      <li class="temp-item">
        <a href="/docs/{{$h.Slug}}">
          <span class="temp-rank">{{add $i 1}}</span>
          <span class="temp-title">{{$h.Title}}</span>
          <span class="temp-views">{{$h.Views}} 阅</span>
        </a>
      </li>
      {{end}}
    </ol>
    {{else}}
    <div class="mod-empty" style="padding:20px;">书架刚开张，还没人翻过书。</div>
    {{end}}
    <p class="temp-poem" style="margin:12px 0 0;">有人读的书，才有温度。这座书架的温度，全靠你们一页页翻出来。</p>
  </div>
  {{template "module_meta" .}}
  </div>
{{end}}