<style>
  th {
    text-align: left;
  }
  td {
    text-align: right;
  }
</style>
<h1><a href="/">Spaced Repetition Flashcards</a></h1>
<h2>Fieldsets</h2>
<a href="/fieldset" onclick="return add()"><button>Add</button></a>
<table border="1" class="sortable">
<thead>
  <tr>
    {{#each fieldsets.[0]}}
      <th>{{@key}}</th>
    {{/each}}
  </tr>
</thead>
<tbody>
  {{#each fieldsets}}
    <tr>
      {{#each this}}
        <td>{{this}}</td>
      {{/each}}
    </tr>
  {{/each}}
</tbody>
</table>
<script src="js/sorttable.js"></script>
<script>
  function add () {
    window.open('/fieldset', 'Edit Note', 'height=800,width=600');
    return false;
  }
  document.querySelectorAll('table tr')
  .forEach(e => e.addEventListener('click', (event) => {
    const cells = event.currentTarget.getElementsByTagName('td');
    window.open('/fieldset/' + cells[0].innerText, 'Edit Fieldset',
      'height=800,width=600');
  }));
</script>
