{{include "header.html"}}
{{include "nav.html"}}

{{if .Content}}
<section class="section">
  <div class="container article-layout">
    <div>
      <header class="article-header glass">
        <span class="kicker">story note</span>
        <h1>{{.Content.Title}}</h1>
        <div class="article-topline">
          <span>{{ParseTime .Content.CreatedAt "2006-01-02"}}</span>
          {{if .Content.Author}}<span>· {{.Content.Author}}</span>{{end}}
          {{if .Content.ColumnName}}<span>· <a href="{{.Content.ColumnURL}}">{{.Content.ColumnName}}</a></span>{{end}}
          {{if .Content.Views}}<span>· {{.Content.Views}} 阅读</span>{{end}}
        </div>
        {{if .Content.Description}}<p style="margin-top:16px;">{{.Content.Description}}</p>{{end}}
      </header>

      <article class="article-body glass">
        {{if .Content.Img}}<img class="article-cover" src="{{.Content.Img}}" alt="{{.Content.Title}}">{{end}}
        <div class="prose">{{.Content.Content | Str2Html}}</div>

        {{if .Content.Tags}}
        <div class="article-tags" style="margin-top:26px;">
          {{range .Content.Tags}}<a href="{{.URL}}">#{{.Name}}</a>{{end}}
        </div>
        {{end}}

        <div class="article-footer-nav">
          {{if .Prev}}
          <a href="{{.Prev.URL}}" class="article-nav-card">
            <small>上一篇</small>
            <strong>{{.Prev.Title}}</strong>
          </a>
          {{else}}<div class="article-nav-card"><small>上一篇</small><strong>已经到最前面了</strong></div>{{end}}
          {{if .Next}}
          <a href="{{.Next.URL}}" class="article-nav-card">
            <small>下一篇</small>
            <strong>{{.Next.Title}}</strong>
          </a>
          {{else}}<div class="article-nav-card"><small>下一篇</small><strong>还没有更新到这里</strong></div>{{end}}
        </div>
      </article>

      {{$related := Related .Content.Id 4}}
      {{if $related}}
      <section class="section" style="padding-top:22px;">
        <div class="section-title">
          <div>
            <span class="kicker">related notes</span>
            <h2>也许你还会想看</h2>
          </div>
        </div>
        <div class="gallery-grid">
          {{range $related}}
          <article class="gallery-card glass">
            {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}">{{end}}
            <div class="gallery-meta"><span>{{ParseTime .CreatedAt "2006-01-02"}}</span></div>
            <h3>{{.Title}}</h3>
            <p>{{StrSub .Description 86}}</p>
            <a href="{{.URL}}" class="card-link">继续阅读 →</a>
          </article>
          {{end}}
        </div>
      </section>
      {{end}}
    </div>

    {{include "sidebar.html"}}
  </div>
</section>
{{end}}

{{include "js.html"}}
{{include "footer.html"}}