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