<template>
  <div id="app">
    <header class="page-header"></header>
    <section class="wrapper">
      <form class="new-todo-form">
        <label class="new-todo-label">
          New Todo:
          <input v-model="newTodo" type="text" class="new-todo-input"/>
        </label>
        <button type="submit" @click.prevent="addTodo()" class="new-todo-button">Add</button>
      </form>
      <ul class="todo-list">
        <li v-for="todo in todos" :key="todo.id" class="todo-item">
          <label v-if="currentlyEditing !== todo.id" class="todo-item-label">
            <input
              type="checkbox"
              v-model="todo.completed"
              @change="updateTodo(todo)"
              class="todo-item__checkbox">
              {{todo.text}}
          </label>
          <div v-if="currentlyEditing !== todo.id">
            <button
              @click="editTodo(todo)"
              class="todo-button">
              <img src="./assets/pencil.svg" alt="Edit todo">
            </button>
            <button
              @click="deleteTodo(todo)"
              class="todo-button">
              <img src="./assets/trash.svg" alt="Delete todo">
            </button>
          </div>
          <form v-else class="edit-todo-form">
            <label class="edit-todo-label">
              Edit:
              <input type="text" v-model="todoEditText" class="edit-todo-input">
            </label>
            <button
              type="submit"
              class="edit-todo-button"
              @click.prevent="updateTodoText()">
              Save
            </button>
          </form>
        </li>
      </ul>
    </section>
  </div>
</template>