{% include 'header.html' %}

<h1>{{wishlist.title}}</h1>
<sub>{{wishlist.description}}</sub>

<a href="{{url_for('edit', id=wishlist.editId)}}">edit</a>

<ul>
  {% if wishlist.items|length == 0 %}
    <p>No items yet</p>
  {% endif %}
  {% for item in wishlist.items %}
    <li>
      <form method="POST" href="{{ url_for("view", id=wishlist.editId) }}">
        {{ form.csrf_token }}
        {{ form.num(value = loop.index) }}

        <input type=checkbox {{ "checked disabled" if item.bought}}>
        {{ item.title }}: {{ item.description }}
      </form>
    </li>        
  {% endfor %}
</ul>

<dialog>
  <p>Are you sure you bought this product. You won't be able to undo this.</p>
  <form method="dialog">
    <button id="dialog-confirm-ok">OK</button>
    <button id="dialog-confirm-no">Close</button>
  </form>
</dialog>

<script>
  const $ = (...f) => document.querySelector(...f);
  const $all = (...f) => document.querySelectorAll(...f);

  const items = Array.from($all("input[type=checkbox]"));
  const dialog = $("dialog")
  const dialogOk = $("#dialog-confirm-ok")
  const dialogNo = $("#dialog-confirm-no")

  for (let checkbox of items) {
      checkbox.addEventListener("click", e => { 
        e.preventDefault();
        const onclick = () => checkbox.form.submit();

        dialogOk.addEventListener("click", onclick);
        dialogNo.addEventListener(
          "click", 
          () => dialogOk.removeEventListener("click", onclick)
        ); 

        console.log(dialog)
        dialog.show();
      });
  }

</script>

{% include 'footer.html' %}