{{define "user_profile"}}
<section class="profile-hero">
  <div class="profile-avatar">{{initial .Data.Nickname}}</div>
  <div class="profile-id">
    <h1 class="profile-name">{{.Data.Nickname}}</h1>
    <p class="profile-handle">@{{.Data.Username}}<span class="profile-sep">·</span>加入于 {{date .Data.CreatedAt}}{{if eq .Data.Role "admin"}}<span class="profile-badge">站长</span>{{end}}</p>
  </div>
  <div class="profile-acts">
    {{if .Data.Self}}
    <a class="btn btn-ghost btn-sm" href="/favorites">我的收藏</a>
    {{else}}
    {{template "follow_button" dict "VD" . "Type" "user" "Key" .Data.Username "Title" .Data.Nickname "URL" (printf "/u/%s" .Data.Username) "Self" .Data.Username}}
    {{end}}
  </div>
</section>

<div class="stat-strip">
  <div class="stat-cell"><span class="stat-num">{{.Data.Stats.Contents}}</span><span class="stat-lbl">公开内容</span></div>
  <div class="stat-cell"><span class="stat-num">{{.Data.Stats.Following}}</span><span class="stat-lbl">关注</span></div>
  <div class="stat-cell"><span class="stat-num">{{.Data.Stats.Followers}}</span><span class="stat-lbl">粉丝</span></div>
  <div class="stat-cell"><span class="stat-num">{{.Data.Stats.Likes}}</span><span class="stat-lbl">获赞</span></div>
</div>

<div class="sub-tabs">
  <a href="/u/{{.Data.Username}}" class="sub-tab {{if eq .Data.Tab "contents"}}active{{end}}">内容</a>
  {{if .Data.Self}}<a href="/u/{{.Data.Username}}?tab=following" class="sub-tab {{if eq .Data.Tab "following"}}active{{end}}">我关注的（{{.Data.Stats.Following}}）</a>{{end}}
</div>

{{if eq .Data.Tab "following"}}
  <div class="panel-box">
    {{if .Data.FollowList}}
    <ul class="follow-list">
      {{range .Data.FollowList}}
      <li class="follow-item">
        <span class="follow-type">{{.TypeLabel}}</span>
        <a class="follow-title" href="{{.URL}}">{{.Title}}</a>
        <span class="follow-time">{{date .CreatedAt}}</span>
        {{template "follow_button" dict "VD" $ "Type" .TargetType "Key" .TargetKey "Title" .Title "URL" .URL "Self" ""}}
      </li>
      {{end}}
    </ul>
    {{else}}
    <div class="empty">还没有关注任何人或栏目。看到喜欢的作者，点一下「关注」，他们更新时你就不会错过。</div>
    {{end}}
  </div>
{{else}}
  {{if .Data.Items}}
  <div class="feed-list">
    {{range .Data.Items}}
    <article class="feed-item">
      <div class="feed-meta">
        <span class="feed-label">{{.Label}}</span>
        {{if .Time}}<span class="feed-time">{{date .Time}}</span>{{end}}
        {{if .Meta}}<span class="feed-extra">{{.Meta}}</span>{{end}}
      </div>
      <h3 class="feed-title"><a href="{{.URL}}">{{.Title}}</a></h3>
      {{if .Excerpt}}<p class="feed-excerpt">{{truncate .Excerpt 110}}</p>{{end}}
      {{if .Likes}}<span class="feed-likes">♥ {{.Likes}}</span>{{end}}
    </article>
    {{end}}
  </div>
  {{else}}
  <div class="empty">这位朋友还没有公开发布内容。等一等，或者先关注他/她。</div>
  {{end}}
{{end}}
{{end}}