<style>
  th {
    text-align: left;
  }
  td {
    text-align: right;
  }
</style>
<h1><a href="/">Spaced Repetition Flashcards</a></h1>
<h2>Template Sets</h2>
<table border="1" class="sortable">
<thead>
  <tr>
    <th>name</th>
    <th>fields</th>
    <th>templates</th>
  </tr>
</thead>
<tbody>
  {{#each templatesets}}
    <tr>
      <td>{{this.name}}</td>
      <td>
        {{#each this.fields}}
          {{this}}</br>
        {{/each}}
      </td>
      <td>
        {{#each this.templates}}
          {{this.name}}</br>
        {{/each}}
      </td>
    </tr>
  {{/each}}
</tbody>
</table>
<script src="js/sorttable.js"></script>
<script>
  document.querySelectorAll('table tr')
  .forEach(e => e.addEventListener('click', (event) => {
    const cells = event.currentTarget.getElementsByTagName('td');
    window.open('/templateset/' + cells[0].innerText, 'Edit Templateset',
      'height=800,width=600');
  }));
</script>
