{% include "./header.html" %}
<h1>Your TODOs</h1>

<p>Welcome {{ name }}, here's your TODOs</p>

<ol>
  {% for todo in todo_list %}
  <li style="display: flex; gap: 1rem;"><form action="/todo?todo_id={{ todo.id }}" method="POST"><button>X</button></form> {{ todo.task }}</li>
  {% else %}
    <li>No TODO Items</li>
  {% endfor %}
</ol>

<h4>Add a New TODO</h4>
<form action="/todo" method="POST">
  <label for="task">Task</label>
  <input name="task"></input>
</form>
{% include "./footer.html" %}