{{ if not .TemplateData.Songs }}
  <div>No songs are available</div>
{{ else }}
  <form class="pure-form" action="/admin/build" method="POST">
    <fieldset>
      <input id="chosen_songs" name="chosen_songs" value="" type="hidden">
      <button class="pure-button pure-button-primary" type="submit">Build File</button>
    </fieldset>
  </form>
  <div>
    <label for="filter">Filter</label>
    <input onkeyup="updateFilter(this.value);" name="filter" value="" placeholder="Filter Songs">
    <table id="song-table" class="pure-table pure-table-bordered center">
      <thead>
        <tr>
          <th>Name</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {{ range $i, $v := .TemplateData.Songs }}
        <tr data-file="{{$v.Name}}>
          <td>{{$v.Name}}</td>
          <td>
            <a class="pure-button pure-button-secondary" onclick="javascript:toggleFile(this, '{{$v.Name}});">Add</a>
          </td>
        </tr>
        {{ end }}
      </tbody>
    </table>
  </div>
  <script>
var selectedFiles = [];
var tablerows = document.getElementsByTagName("tr");

function updateFilter(flt) {
  flt = flt.toLowerCase();
  for(var i = 0; i < tablerows.length; i++) {
    if(tablerows[i].dataset.file.toLowerCase().startsWith(flt)) {
      tablerows[i].classList.remove("hidden");
    } else {
      tablerows[i].classList.add("hidden");
    }
  }
}

function toggleFile(btn, sng) {
  if(!btn.classList.contains("pure-button-warning")) {
    btn.classList.remove("pure-button-secondary");
    btn.classList.add("pure-button-warning");
    for(var i = 0; i < selectedFiles.length; i++) {
      if(selectedFiles[i] == sng) { return; }
    }
    selectedFiles.push(sng);
    btn.innerText = "Remove";
  } else {
    btn.classList.remove("pure-button-warning");
    btn.classList.add("pure-button-secondary");
    for(var i = 0; i < selectedFiles.length; i++) {
      if(selectedFiles[i] == sng) { delete selectedFiles[i]; }
    }
    btn.innerText = "Add";
  }
  updateFilesInput();
}

function removeSong(sng) {
  for(var i = 0; i < selectedFiles.length; i++ {
    if(selectedFiles[i] == sng) { delete selectedFiles[i]; }
  }
  updateFilesInput();
}
  </script>
{{ end }}