{{define "notifications"}}
<section class="page-head">
  <h1 class="page-title">消息中心</h1>
  <p class="page-desc">被回复、被@、被点赞、新的关注者，还有站长的系统提醒，都在这里等你路过。</p>
  {{if .Data.HasRead}}
  <form class="act-form" method="post" action="/notifications/read">
    <input type="hidden" name="csrf" value="{{.CSRF}}">
    <input type="hidden" name="id" value="all">
    <input type="hidden" name="back" value="/notifications">
    <button class="btn btn-ghost btn-sm" type="submit">全部标为已读</button>
  </form>
  {{end}}
</section>

<div class="sub-tabs">
  <a href="/notifications" class="sub-tab {{if eq .Data.Tab "all"}}active{{end}}">全部</a>
  <a href="/notifications?tab=system" class="sub-tab {{if eq .Data.Tab "system"}}active{{end}}">系统提醒</a>
  <a href="/notifications?tab=mention" class="sub-tab {{if eq .Data.Tab "mention"}}active{{end}}">被@</a>
  <a href="/notifications?tab=reply" class="sub-tab {{if eq .Data.Tab "reply"}}active{{end}}">被回复</a>
  <a href="/notifications?tab=like" class="sub-tab {{if eq .Data.Tab "like"}}active{{end}}">点赞</a>
  <a href="/notifications?tab=follow" class="sub-tab {{if eq .Data.Tab "follow"}}active{{end}}">关注</a>
</div>

{{if .Data.Items}}
<div class="msg-list">
  {{range .Data.Items}}
  <div class="msg-item{{if not .Read}} unread{{end}}">
    <span class="msg-kind msg-k-{{.Kind}}">{{.KindLabel}}</span>
    <div class="msg-body">
      <a class="msg-title" href="{{if .URL}}{{.URL}}{{else}}/notifications{{end}}">{{.Title}}</a>
      {{if .Body}}<p class="msg-text">{{.Body}}</p>{{end}}
      <span class="msg-time">{{dateTime .CreatedAt}}{{if .Actor}} · 来自 {{.Actor}}{{end}}</span>
    </div>
    {{if not .Read}}
    <form class="act-form" method="post" action="/notifications/read">
      <input type="hidden" name="csrf" value="{{$.CSRF}}">
      <input type="hidden" name="id" value="{{.ID}}">
      <input type="hidden" name="back" value="/notifications?tab={{$.Data.Tab}}">
      <button class="btn btn-ghost btn-sm" type="submit">标为已读</button>
    </form>
    {{end}}
  </div>
  {{end}}
</div>
{{else}}
<div class="empty">这里还很安静。等有人回复你、@你或点赞你，消息就会一条条落进来。</div>
{{end}}
{{end}}