{{define "title"}}Account{{end}}
{{define "content"}}
<h1>Your account</h1>
<p class="lead">Signed in as {{.Person.Username}}{{if .Person.IsModerator}} <span class="tag gold">{{.Person.Role}}</span>{{end}}</p>
{{if .Error}}<div class="error">{{.Error}}</div>{{end}}

<div class="panel">
  <h2>IMVU accounts <span class="count">{{len .Links}} of {{.Person.LinkCap}}</span></h2>
  {{range .Links}}
  <div class="account-row">
    <div class="avatar">{{slice .Username 0 1 | upper}}</div>
    <div class="account-main">
      <div class="account-name">{{.Username}}</div>
      <div class="tags">
        {{if .Online}}<span class="tag online">online in T5DE</span>{{end}}
        {{if .AgeVerified}}<span class="tag adult">age verified</span>{{else if .AccessPass}}<span class="tag adult">Access Pass</span>{{else}}<span class="tag">not age verified</span>{{end}}
        <span class="tag">checked {{ago .CheckedAt}}</span>
      </div>
      {{if .Outfit}}
      <div class="small muted">Wearing:</div>
      <div class="outfit">{{range .Outfit}}<span class="item">{{.Name}}</span>{{end}}</div>
      {{end}}
      <div class="settings">
        <form method="post" action="/account/links/{{.IMVUID}}/settings">
          <input type="hidden" name="csrf" value="{{$.CSRF}}">
          <label class="check"><input type="checkbox" name="badge" {{if .ShowBadge}}checked{{end}}> Show T5DE badge</label>
          <label class="check"><input type="checkbox" name="presence" {{if .ShowPresence}}checked{{end}}> Show when I'm online in T5DE</label>
          <button class="secondary">Save</button>
        </form>
      </div>
    </div>
    <div class="row-actions">
      <form method="post" action="/account/links/{{.IMVUID}}/recheck"><input type="hidden" name="csrf" value="{{$.CSRF}}"><button class="secondary" title="Check age verification with IMVU again">Check again</button></form>
      <form method="post" action="/account/links/{{.IMVUID}}/unlink"><input type="hidden" name="csrf" value="{{$.CSRF}}"><button class="secondary">Unlink</button></form>
    </div>
  </div>
  {{else}}
  <p class="empty">No IMVU accounts linked yet.</p>
  {{end}}
</div>

{{range .Challenges}}
<div class="panel" id="link-{{.IMVUID}}">
  <h2>Link {{.Username}}</h2>
  <p>To prove {{.Username}} is yours:</p>
  <ol class="steps">
    <li>Put this code anywhere in {{.Username}}'s IMVU tagline (on your avatar card in the client, or your profile):<br>
      <span class="code">{{.Code}}</span></li>
    <li>Press Check. You can take the code out again once it's linked.</li>
  </ol>
  <div class="actions">
    <form method="post" action="/account/link/{{.IMVUID}}/check"><input type="hidden" name="csrf" value="{{$.CSRF}}"><button>Check</button></form>
    <form method="post" action="/account/link/{{.IMVUID}}/cancel"><input type="hidden" name="csrf" value="{{$.CSRF}}"><button class="secondary">Cancel</button></form>
    <span class="muted small">The code works for a day.</span>
  </div>
</div>
{{end}}

{{if .CanLink}}
<div class="panel">
  <h2>Link an IMVU account</h2>
  <form method="post" action="/account/link" class="inline">
    <input type="hidden" name="csrf" value="{{.CSRF}}">
    <input type="text" name="username" placeholder="IMVU username" required maxlength="64">
    <button>Next</button>
  </form>
  <p class="muted small">Other people can't see which IMVU accounts are yours. Age-verified IMVU accounts (or with Access Pass)
  can see adult community products; each account is checked on its own.</p>
</div>
{{else}}
<div class="panel"><p class="muted">You've linked as many IMVU accounts as you can ({{.Person.LinkCap}}). Ask a moderator if you need more.</p></div>
{{end}}

<div class="panel">
  <h2>T5DE on your computers</h2>
  <p class="muted">{{if .Signins}}Signed in on {{.Signins}} computer{{if ne .Signins 1}}s{{end}}.{{else}}Not signed in on any computer yet.{{end}}
  To sign T5DE in, it shows a code to enter at <a href="/device">/device</a>.</p>
  {{if .Signins}}
  <form method="post" action="/account/proxies/signout"><input type="hidden" name="csrf" value="{{.CSRF}}"><button class="secondary">Sign out everywhere</button></form>
  {{end}}
</div>
{{end}}