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

<main class="container page-layout">
  <section class="content-main">
    <div class="page-head">
      <p class="eyebrow">GUIDE</p>
      <h1>{{if .CurrentColumn}}{{.CurrentColumn.Title}}{{else}}{{.Title}}{{end}}</h1>
      {{if .CurrentColumn}}{{if .CurrentColumn.Description}}<p>{{.CurrentColumn.Description}}</p>{{end}}{{end}}
    </div>
    {{if .List}}
    <div class="article-list">
      {{range .List}}
      <a class="article-card" href="{{.URL}}">
        <img src="{{DefaultCover .Img}}" alt="{{.Title}}">
        <div>
          <span>{{.ColumnName}} · {{ParseTime .CreatedAt "2006-01-02"}}</span>
          <h2>{{.Title}}</h2>
          <p>{{StrLimit .Description 110 "..."}}</p>
        </div>
      </a>
      {{end}}
    </div>
    {{if .Pager.Enabled}}
    <nav class="pager">
      {{if .Pager.HasPrev}}<a href="{{.Pager.PrevURL}}">上一页</a>{{end}}
      {{range .Pager.Items}}{{if .Active}}<span class="active">{{.Label}}</span>{{else if .URL}}<a href="{{.URL}}">{{.Label}}</a>{{end}}{{end}}
      {{if .Pager.HasNext}}<a href="{{.Pager.NextURL}}">下一页</a>{{end}}
    </nav>
    {{end}}
    {{else}}
    <div class="empty-state">暂无内容。</div>
    {{end}}
  </section>
  {{include "guide-sidebar.html"}}
</main>

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