{{define "content"}}
{{$s := .Data}}
<h1>{{$s.Title}}</h1>
<p class="byline">
  {{$s.Artist}} · {{$s.GenreLabel}} · {{$s.Length}} ·
  lähettänyt {{$s.Submitter}} {{fidate $s.CreatedAt}}
  {{if $s.Own}}<span class="tag">oma kappale</span>{{end}}
</p>

{{template "player" $s}}

{{with $s.Description}}<p class="intro">{{.}}</p>{{end}}
{{with $s.SourceURL}}<p class="muted"><a href="{{.}}" rel="noreferrer">Kuuntele YouTubessa</a></p>{{end}}

{{if $s.CanEdit}}
<details class="editbox">
  <summary>Muokkaa tietoja</summary>
  <form method="post" action="/songs/{{$s.ID}}" class="stack">
    <label>Nimi <input name="title" value="{{$s.Title}}" maxlength="100" required></label>
    <label>Esittäjä <input name="artist" value="{{$s.Artist}}" maxlength="100" required></label>
    <label>Genre
      <select name="genre" required>
        {{$current := $s.Genre}}
        {{range $s.Genres}}
          <option value="{{.Code}}" {{if eq .Code $current}}selected{{end}}>{{.Label}}</option>
        {{end}}
      </select>
    </label>
    <label>Esittely <textarea name="description" rows="4" maxlength="2000">{{$s.Description}}</textarea></label>
    <button type="submit">Tallenna</button>
  </form>
  <form method="post" action="/songs/{{$s.ID}}/delete"
        onsubmit="return confirm('Poistetaanko kappale lopullisesti?')">
    <button type="submit" class="danger">Poista kappale</button>
  </form>
  <p class="muted small">Muokkaus ja poisto ovat mahdollisia vain ennen ensimmäistä arvostelua.</p>
</details>
{{else if $s.Own}}
  <p class="muted small">Kappaletta on jo arvosteltu, joten tietoja ei voi enää muuttaa.</p>
{{end}}

<section>
  {{if $s.CanReview}}
    <h2>Arvostele</h2>
    <form method="post" action="/songs/{{$s.ID}}/review" class="stack">
      {{template "scorefield" 50}}
      <label>Arvostelu
        <textarea name="text" rows="6" maxlength="5000" required
                  placeholder="Mitä kuulit?"></textarea>
      </label>
      <button type="submit">Tallenna arvostelu</button>
    </form>
    <p class="muted small">Muiden arvostelut ja pisteet paljastuvat kun olet tallentanut omasi.
      Voit muokata tai poistaa arvostelusi 30 minuutin ajan.</p>
  {{else if $s.ViewerReview}}
    <h2>Oma arvostelusi</h2>
    {{with $s.ViewerReview}}
      {{if .CanEdit}}
        <form method="post" action="/reviews/{{.ID}}" class="stack">
          <input type="hidden" name="from" value="/songs/{{$s.ID}}">
          {{template "scorefield" .Score}}
          <label>Arvostelu
            <textarea name="text" rows="6" maxlength="5000" required>{{.Text}}</textarea>
          </label>
          <button type="submit">Päivitä</button>
        </form>
        <form method="post" action="/reviews/{{.ID}}/delete"
              onsubmit="return confirm('Poistetaanko arvostelu?')">
          <input type="hidden" name="from" value="/songs/{{$s.ID}}">
          <button type="submit" class="danger">Poista arvostelu</button>
        </form>
        <p class="muted small">Muokkausaika päättyy {{fidate .EditableUntil}}.</p>
      {{else}}
        <p class="score">{{.Score}}</p>
        <p>{{.Text}}</p>
        <p class="muted small">Muokkausaika on päättynyt.</p>
      {{end}}
    {{end}}
  {{end}}
</section>

<section>
  <h2>Arvostelut{{if $s.ReviewCount}} ({{$s.ReviewCount}}){{end}}</h2>

  {{if $s.Revealed}}
    {{if $s.Average}}<p class="average">Keskiarvo <strong>{{score $s.Average}}</strong></p>{{end}}
    {{range $s.Reviews}}
      <article class="review">
        <header>
          <span class="avatar">{{.Initials}}</span>
          <strong>{{.Reviewer}}</strong>
          <span class="score">{{.Score}}</span>
          <span class="muted small">{{fidate .CreatedAt}}</span>
        </header>
        <p>{{.Text}}</p>
      </article>
    {{else}}
      <p class="muted">Kukaan ei ole vielä arvostellut tätä kappaletta.</p>
    {{end}}
  {{else}}
    <p class="muted">Muiden arvostelut ja keskiarvo näkyvät kun olet kirjoittanut omasi.
      {{if $s.ReviewCount}}Arvosteluja on {{$s.ReviewCount}}.{{end}}</p>
  {{end}}
</section>
{{end}}