{{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>
  <div class="statcard"><span class="statvalue">{{if $p.Stats.AverageGiven}}{{score $p.Stats.AverageGiven}}{{else}}—{{end}}</span><span class="muted small">antanut ka.</span></div>
  <div class="statcard"><span class="statvalue">{{if $p.Stats.AverageReceived}}{{score $p.Stats.AverageReceived}}{{else}}—{{end}}</span><span class="muted small">saanut ka.</span></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}}