{{define "archive_docs_read"}}
<div class="archive-page">
  <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="archive-record">
    <div class="archive-record-stamp" aria-hidden="true">典藏</div>
    <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="archive-reading">
    {{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="archive-notes">
    <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">{{strictMD .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" data-zx-editor placeholder="在这页书边，写点什么…" maxlength="500" required></textarea></div>
      <button class="btn btn-primary" type="submit">留下随手记</button>
    </form>
  </section>
</div>
{{end}}