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

<script src="/alpine.js"></script>

<script>
  const new_task = async (todos, task) => {
    const result = await axios({
      method: "post",
      url: "/todo_alpine",
      data: {task},
      headers: {
        Accept: "application/json"
      }
    });

    // zero error handling but fine for now
    return result.data;
  }

  const list_todo = async () => {
    const result = await axios({
      method: "get",
      url: "/todo_alpine",
      headers: {
        Accept: "application/json"
      }
    });

    return result.data;
  }
</script>

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

<div
  x-data="{todos: []}"
  x-init="todos = await list_todo()">
  <ol>
    <template x-for="todo of todos">
      <li x-text="todo.task"></li>
    </template>
  </ol>

  <h4>Add a New TODO</h4>
  <form action="/todo_alpine" @submit.prevent="todos = await new_task(todos, task), task = ''" method="POST" x-data="{task: ''}">
    <label for="task">Task</label>
    <input name="task" x-model="task"></input>
    <button type="button" @click="todos = await new_task(todos, task), task = ''">Submit</button>
  </form>

</div>
{% include "./footer.html" %}