{{define "title"}}Online{{end}}
{{define "content"}}
<h1>Online in T5DE</h1>
<p class="lead">IMVU accounts in a T5DE client right now, that chose to show it.</p>
<div class="panel" hx-get="/online/list" hx-trigger="every 5s" hx-swap="innerHTML">
  {{template "online-list" .}}
</div>
{{end}}

{{define "online-list"}}
{{range .Online}}
<div class="account-row">
  <div class="avatar">{{slice .Link.Username 0 1 | upper}}</div>
  <div class="account-main">
    <div class="account-name">{{.Link.Username}}</div>
    <div class="tags">
      {{if .Link.ShowBadge}}<span class="tag gold">T5DE</span>{{end}}
      <span class="tag online">online {{ago .Online.Since}}</span>
      {{if .Hidden}}<span class="tag warn">hidden: moderators only</span>{{end}}
    </div>
    {{if .Online.Outfit}}<div class="outfit">{{range .Online.Outfit}}<span class="item">{{.Name}}</span>{{end}}</div>{{end}}
  </div>
</div>
{{else}}
<p class="empty">Nobody is showing that they're online right now.</p>
{{end}}
{{end}}