<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Todos</title>
  <script src="https://unpkg.com/htmx.org@1.9.12"></script>
  <link rel="stylesheet" href="/styles.css">
</head>
<body>
  <h1>Todos</h1>

  <form hx-post="/todos"
        hx-target="#todos"
        hx-swap="beforeend"
        hx-on::after-request="if(event.detail.successful) this.reset()">
    <input type="text" name="title" placeholder="What needs done?" required autofocus>
    <button>Add</button>
  </form>

  <div id="form-error" class="form-error"></div>

  <ul id="todos">
    {% for todo in todos %}
      <li class="{% if todo.done %}done{% endif %}">
        <span class="title">{{ todo.title }}</span>
        <span class="actions">
          <button hx-post="/todos/toggle"
                  hx-vals='{"id": {{ todo.id }}}'
                  hx-target="closest li"
                  hx-swap="outerHTML">Toggle</button>
          <button hx-post="/todos/delete"
                  hx-vals='{"id": {{ todo.id }}}'
                  hx-target="closest li"
                  hx-swap="outerHTML">Delete</button>
        </span>
      </li>
    {% else %}
      <li class="empty">No todos yet. Add one above.</li>
    {% endfor %}
  </ul>
</body>
</html>
