{{define "docs_read"}}
  <div class="thm-docs">
  <div class="mod-back">
    <a href="/docs">← 返回书架</a>
    {{if .Data.Doc.CatHref}}<span style="color:var(--muted);margin:0 8px;">/</span><a href="{{.Data.Doc.CatHref}}">{{.Data.Doc.Category}}</a>{{end}}
  </div>

  <article class="mod-detail-head">
    <div class="mod-card-top" style="margin-bottom:8px;">
      <span class="mod-chip">{{.Data.Doc.Category}}</span>
      <span class="mod-chip time" title="质量星标 {{.Data.Doc.Stars}}/5">{{.Data.Doc.StarsText}}</span>
    </div>
    <h1 class="mod-detail-title">{{.Data.Doc.Title}}</h1>
    <div class="mod-detail-meta">
      <span>{{ico "pen"}} 上架 {{date .Data.Doc.CreatedAt}}</span>
      {{if ne .Data.Doc.UpdatedAt ""}}<span>{{ico "refresh"}} 修订 {{date .Data.Doc.UpdatedAt}}</span>{{end}}
      <span>{{ico "eye"}} {{.Data.Doc.Views}} 次翻阅</span>
      <span>{{ico "pen"}} {{.Data.NotesCount}} 条随手记</span>
      {{template "fav_button" dict "VD" . "Type" "docs" "Key" .Data.Doc.Slug "Title" .Data.Doc.Title "URL" (printf "/docs/%s" .Data.Doc.Slug)}}
    </div>
  </article>

  <div class="mod-panel" style="padding:30px 34px;">
    {{if .Data.Doc.Summary}}
    <blockquote class="read-summary" style="margin-bottom:22px;">{{.Data.Doc.Summary}}</blockquote>
    {{end}}

    {{if .Data.TOC}}
    <details class="read-toc" style="margin-bottom:20px;">
      <summary>本页目录</summary>
      <ul class="toc-1">
        {{range .Data.TOC}}
        <li><a href="#{{.ID}}">{{.Text}}</a>
          {{if .Subs}}<ul class="toc-2">
            {{range .Subs}}<li><a href="#{{.ID}}">{{.Text}}</a></li>{{end}}
          </ul>{{end}}
        </li>
        {{end}}
      </ul>
    </details>
    {{end}}

    <div class="article-body">{{.Data.Body}}</div>

    <div class="read-foot" style="margin-top:26px;">
      <span>——《{{.Data.Doc.Title}}》 · 晴空书架藏本</span>
    </div>
  </div>

  <section class="note-zone" style="background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(238,246,255,.62));border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 26px;">
    <h2 class="mod-panel-title">{{ico "pen"}} 随手记（{{.Data.NotesCount}}）</h2>
    {{range .Data.Notes}}
    <div class="note-item">
      <div class="note-head">
        <span class="note-author">{{.Author}}</span>
        <span class="note-time">{{date .CreatedAt}}</span>
      </div>
      <div class="note-content">{{.Content}}</div>
    </div>
    {{else}}
    <div class="mod-empty" style="padding:20px;">还没有人留批注，你是第一个在书页上写字的人。</div>
    {{end}}

    <form class="note-form" method="post" action="/docs/{{.Data.Doc.Slug}}/note">
      <div class="field"><input type="text" name="name" placeholder="你的昵称" maxlength="40" required></div>
      <div class="field"><textarea name="content" placeholder="在这页书边，写点什么…" maxlength="500" required></textarea></div>
      <button class="btn btn-primary" type="submit">留下随手记</button>
    </form>
  </section>
  </div>
{{end}}