{{define "content"}}
<h1>Lähetä kappale</h1>

{{with .Data.Error}}<p class="error">{{.}}</p>{{end}}

<form method="post" action="/submit" enctype="multipart/form-data" class="stack">
  <label class="dropzone" id="dropzone" for="audio">
    <input type="file" id="audio" name="audio" accept="audio/*">
    <span class="dz-title">Raahaa äänitiedosto tähän</span>
    <span class="muted small">tai valitse napsauttamalla</span>
    <span class="filename" id="filename"></span>
  </label>
  <p class="or">tai</p>
  <label>YouTube-linkki
    <input type="url" name="url" placeholder="https://www.youtube.com/watch?v=…">
  </label>
  <button type="submit">Lähetä</button>
</form>

{{with .Data.Submissions}}
<section>
  <h2>Omat lähetykset</h2>
  <table>
    <thead><tr><th>Kappale</th><th>Tila</th><th>Lähetetty</th></tr></thead>
    <tbody>
      {{range .}}
        <tr>
          <td><a href="/submit/{{.ID}}">{{if .Title}}{{.Title}}{{else}}(nimetön){{end}}</a></td>
          <td>{{.Label}}</td>
          <td class="nowrap">{{fidate .CreatedAt}}</td>
        </tr>
      {{end}}
    </tbody>
  </table>
</section>
{{end}}

<p class="muted">Enintään 50 MB ja 15 minuuttia.</p>

<script>
  // The native control can't be relabelled or styled, so it is hidden behind this one — which
  // still is the input, so keyboard focus and form submission work untouched.
  (function () {
    const zone = document.getElementById('dropzone')
    const input = document.getElementById('audio')
    const name = document.getElementById('filename')

    const show = () => {
      name.textContent = input.files.length ? input.files[0].name : ''
      zone.classList.toggle('has-file', input.files.length > 0)
    }
    input.addEventListener('change', show)

    for (const type of ['dragenter', 'dragover']) {
      zone.addEventListener(type, e => { e.preventDefault(); zone.classList.add('over') })
    }
    for (const type of ['dragleave', 'dragend', 'drop']) {
      zone.addEventListener(type, e => { e.preventDefault(); zone.classList.remove('over') })
    }
    zone.addEventListener('drop', e => {
      if (e.dataTransfer.files.length) {
        input.files = e.dataTransfer.files
        show()
      }
    })
  })()
</script>
{{end}}