{{define "player"}}
<!-- Ships with native controls; player.js removes them and drives the same element. No JS means
     the browser's own player, which is plain but complete. -->
<div class="playerwrap" data-duration="{{.Duration}}">
  <audio controls preload="none" src="/audio/{{.ID}}" class="player"></audio>
</div>
{{end}}

{{define "songcard"}}
<a class="songcard{{if and (not .Own) (not .Reviewed)}} unreviewed{{end}}" href="/songs/{{.ID}}">
  {{if .Average}}<span class="scorebadge">{{score .Average}}</span>
  {{else if .ReviewCount}}<span class="scorebadge sealed" title="Pisteet paljastuvat kun arvostelet"></span>{{end}}
  <span class="title">{{.Title}}</span>
  <span class="artist">{{.Artist}}</span>
  <span class="meta">
    <span class="badge genre">{{.GenreLabel}}</span>
    <span>{{.Length}}</span>
    <span>{{.Submitter}}</span>
    {{if .Own}}<span class="badge admin">oma</span>
    {{else if .Reviewed}}<span class="badge reviewed">arvosteltu</span>
    {{else}}<span class="badge pending">arvostelematta</span>{{end}}
    {{if .ReviewCount}}<span>{{.ReviewCount}} arvostelua</span>{{end}}
  </span>
</a>
{{end}}

{{define "fader"}}
<!-- A native range input turned vertical: keyboard, form submission and the value all stay free. -->
<div class="fader">
  <span class="ticks" aria-hidden="true">
    <span>100</span><span>75</span><span>50</span><span>25</span><span>1</span>
  </span>
  <input type="range" name="score" min="1" max="100" value="{{.}}"
         aria-label="Pisteet 1–100"
         oninput="this.closest('.fader').querySelector('output').value = this.value">
  <output class="readout">{{.}}</output>
</div>
{{end}}