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

{{if .Single}}
{{$banner := index .Single.Ext "banner_img"}}
{{$subTitle := index .Single.Ext "sub_title"}}
{{$tips := index .ThemesExt "message_tips"}}
{{$messages := Messages 6}}

<section class="section">
  <div class="container message-grid">
    <div class="message-hero glass">
      {{if $banner}}<img src="{{$banner}}" alt="{{.Single.Name}}">{{end}}
      <div class="overlay"></div>
      <div class="copy">
        <span class="kicker">paper note</span>
        <h1 style="margin:16px 0 10px; font-size:42px;">{{.Single.Name}}</h1>
        <p>{{if $subTitle}}{{$subTitle}}{{else}}{{.Single.Description}}{{end}}</p>
      </div>
    </div>

    <div class="message-board glass">
      <h2 style="margin-top:0;">留下你的纸条</h2>
      <p class="muted">这里保留了留言页的视觉和内容模块。提交入口需要接入站点现有留言表单协议后才能真正写入数据，所以当前按钮只作为界面占位。</p>
      <form class="message-form" action="#" method="post">
        <input type="text" name="nickname" placeholder="昵称">
        <input type="email" name="email" placeholder="邮箱（可选）">
        <textarea name="content" placeholder="可以推荐番剧、交流画画，或者单纯打个招呼。"></textarea>
        <button type="button" class="primary-btn">留言表单待接入</button>
      </form>
      {{if $tips}}
      <div class="message-tips" style="margin-top:18px;">
        {{range $tips}}<div class="tip-item">{{.}}</div>{{end}}
      </div>
      {{end}}
    </div>
  </div>

  {{if $messages}}
  <div class="container" style="margin-top:26px;">
    <div class="section-title">
      <div>
        <span class="kicker">recent messages</span>
        <h2>最近收到的纸条</h2>
      </div>
    </div>
    <div class="comments-grid">
      {{range $messages}}
      <article class="comment-card glass">
        <h4>{{.nickname}}</h4>
        <p>{{.content}}</p>
        <time>{{ParseTime .CreatedAt "2006-01-02"}}</time>
      </article>
      {{end}}
    </div>
  </div>
  {{end}}
</section>
{{end}}

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