<script src=index.es></script>

<template>
  <link rel=stylesheet href=to-do/index.css>

  <h1>{name}'s &lt;to-do&gt; List</h1>

  <form action=#>
    <header>
      <input required placeholder='Remember the milk&hellip;'>
      <button type=submit>Add</button><!-- implicitly calls `onsubmit` -->
    </header>

    <input id=all       name=filter type=radio checked>
    <input id=active    name=filter type=radio>
    <input id=completed name=filter type=radio>

    <template name=tasks>
    <article><!--{#} = current index -->
      <input  id={#} onclick=toggle type=checkbox>
      <label for={#}>{task}</label>

      <button onclick=remove>Remove</button>
    </article>
    </template>

    <menu>{count} items left
      <button onclick=complete>Complete All</button>

      <label for=all>All</label>
      <label for=active>Active</label>
      <label for=completed>Completed</label>

      <button onclick=clear>Clear Completed</button>
    </menu>
  </form>
</template>

<script src=index.es></script>

<template>
  <link rel=stylesheet href=to-do/index.css>

  <h1>{name}'s &lt;to-do&gt; List</h1>

  <form action=#>
    <header>
      <input required placeholder='Remember the milk&hellip;'>
      <button type=submit>Add</button><!-- implicitly calls `onsubmit` -->
    </header>

    <input id=all       name=filter type=radio checked>
    <input id=active    name=filter type=radio>
    <input id=completed name=filter type=radio>

    <template name=tasks>
    <article><!--{#} = current index -->
      <input  id={#} onclick=toggle type=checkbox>
      <label for={#}>{task}</label>

      <button onclick=remove>Remove</button>
    </article>
    </template>

    <menu>
      <button onclick=complete>Complete All</button>

      <label for=all>All {count}</label>
      <label for=active>Active {count}</label>
      <label for=completed>Completed {count}</label>

      <button onclick=clear>Clear Completed</button>
    </menu>
  </form>
</template>

Migrate count display to label
Migrate count display to label
