{{define "content"}}
{{$p := .Data}}
<div class="profilehead">
  {{if $p.Avatar}}
    <img class="avatar big" src="/avatars/{{$p.ID}}" alt="">
  {{else}}
    <span class="avatar big">{{$p.Initials}}</span>
  {{end}}
  <div>
    <h1>{{$p.Name}}</h1>
    <p class="muted">Liittyi {{fidate $p.CreatedAt}}{{if $p.Email}} · {{$p.Email}}{{end}}</p>
  </div>
</div>

<div class="statgrid">
  <div class="statcard"><span class="statvalue">{{$p.Stats.SongsSubmitted}}</span><span class="muted small">kappaletta</span></div>
  <div class="statcard"><span class="statvalue">{{$p.Stats.ReviewsWritten}}</span><span class="muted small">arvostelua</span></div>

  <!-- The one comparison that says something about a person, in the same language as the review
       form: what they give versus what they get. -->
  <div class="statcard wide">
    <div class="channels compare">
      {{if $p.Stats.AverageGiven}}
        <div class="chan" style="--v: {{score $p.Stats.AverageGiven}}">
          <span class="chan-track"><span class="chan-cap"></span></span>
          <span class="chan-score">{{score $p.Stats.AverageGiven}}</span>
          <span class="chan-who">antanut</span>
        </div>
      {{end}}
      {{if $p.Stats.AverageReceived}}
        <div class="chan own" style="--v: {{score $p.Stats.AverageReceived}}">
          <span class="chan-track"><span class="chan-cap"></span></span>
          <span class="chan-score">{{score $p.Stats.AverageReceived}}</span>
          <span class="chan-who">saanut</span>
        </div>
      {{end}}
      {{if and (not $p.Stats.AverageGiven) (not $p.Stats.AverageReceived)}}
        <p class="muted small">Ei vielä pisteitä kumpaankaan suuntaan.</p>
      {{end}}
    </div>
  </div>
</div>

{{if $p.Own}}
<details class="editbox">
  <summary>Muokkaa tietoja</summary>
  <form method="post" action="/profile" enctype="multipart/form-data" class="stack">
    <label>Nimi <input name="name" value="{{$p.Name}}" maxlength="50" required></label>
    <label>Sähköposti <input type="email" name="email" value="{{$p.Email}}" required></label>
    <label>Kuva <input type="file" name="avatar" accept="image/*"></label>
    <label>Nykyinen salasana <input type="password" name="current_password" autocomplete="current-password"></label>
    <label>Uusi salasana <input type="password" name="new_password" autocomplete="new-password"></label>
    <button type="submit">Tallenna</button>
  </form>
  <p class="muted small">Salasanan vaihto vaatii nykyisen salasanan ja kirjaa ulos muut laitteesi.</p>
</details>
{{end}}

<section>
  <h2>Kappaleet</h2>
  {{if $p.Songs}}
    <div class="songgrid">{{range $p.Songs}}{{template "songcard" .}}{{end}}</div>
  {{else}}
    <p class="muted">Ei vielä yhtään kappaletta.</p>
  {{end}}
</section>
{{end}}