{{define "content"}}
<section class="todoapp">
  <header class="header">
    <h1>todos</h1>
    <form action="/todo" method="POST">
      <input name="title" class="new-todo" placeholder="What needs to be done?" autofocus>
      <button style="display: none;">Submit</button>
    </form>
  </header>
  <!-- This section should be hidden by default and shown when there are todos -->
  <section class="main">
    <input id="toggle-all" class="toggle-all" type="checkbox">
    <label for="toggle-all">Mark all as complete</label>
    <ul class="todo-list">
      {{range .Todos}}
        {{template "_task.html" .}}
      {{end}}
    </ul>
  </section>
  <!-- This footer should be hidden by default and shown when there are todos -->
  <footer class="footer">
    <!-- This should be `0 items left` by default -->
    <span class="todo-count"><strong>{{.Incomplete}}</strong> items left</span>
    <!-- Remove this if you don't implement routing -->
    <ul class="filters">
      <li>
        <a class="{{if eq .Only ""}}selected{{end}}" href="/">All</a>
      </li>
      <li>
        <a class="{{if eq .Only "active"}}selected{{end}}" href="/?only=active">Active</a>
      </li>
      <li>
        <a class="{{if eq .Only "completed"}}selected{{end}}" href="/?only=completed">Completed</a>
      </li>
    </ul>
    <!-- Hidden if no completed items are left ↓ -->
    <form action="/clear" method="POST">
      <button class="clear-completed">Clear completed</button>
    </form>
  </footer>
</section>
{{end}}