{% set cpath = url_for("edit", id=wishlist.editId) %}
<main>
  <h1>Edit '{{wishlist.title}}'</h1>
  <sub>Manage your wishlist details and items</sub>
  <br>
  <form action="{{ cpath }}" method="POST">
      {{ form_wl_editinfo.hidden_tag() }}
      {{ form_wl_editinfo.title.label }}
      {{ form_wl_editinfo.title(placeholder=wishlist.title) }}
      <!-- <br> -->
      {{ form_wl_editinfo.description.label }}
      {{ form_wl_editinfo.description(placeholder=wishlist.description) }}
      <!-- <br> -->
      {{ form_wl_editinfo.wl_edit_submit() }}
  </form>
  <br>
  <h1>Urls</h1>
  <ul>
      <li>
          View: <a href={{ url_for("view", id=wishlist.viewId) }}>{{ wishlist.viewId }}</a>
      </li>
      <li>
          Edit: <a href={{ url_for("edit", id=wishlist.editId) }}>{{ wishlist.editId }}</a>
      </li>
  </ul>
  <form action="{{ cpath }}" method="POST">
      {{ form_wl_reseturls.hidden_tag() }}
      {{ form_wl_reseturls.wl_reset_submit() }}
  </form>
  <br>
  <h1>New item</h1>
  <form action="{{ cpath }}" method="POST">
      {{ form_it_new.hidden_tag() }}
      <!-- <br> -->
      {{ form_it_new.it_new_title.label }}
      {{ form_it_new.it_new_title() }}
      <!-- <br> -->
      {{ form_it_new.description.label }}
      {{ form_it_new.description() }}
      <!-- <br> -->
      {{ form_it_new.price.label }}
      {{ form_it_new.price() }}
      <!-- <br> -->
      {{ form_it_new.url.label }}
      {{ form_it_new.url() }}
      <!-- <br> -->
      {{ form_it_new.image.label }}
      {{ form_it_new.image() }}
      <!-- <br> -->
      {{ form_it_new.it_new_submit() }}
      <button id="scrape">Scrape</button>
  </form>
  <br>
  <h1>Delete items</h1>
  {% if wishlist.items|length == 0 %}<p>No items yet</p>{% endif %}
  <ul>
      {% for value in wishlist.items %}
          <li>
              <form action="{{ cpath }}" method="POST">
                  {{ form_it_delete.csrf_token }}
                  {{ form_it_delete.index(value=loop.index) }}
                  {{ form_it_delete.it_del_submit() }}
              </form>
              {{ value.title }}
          </li>
      {% endfor %}
  </ul>
  <br>
  <h1>Delete wishlist</h1>
  <form action="{{ cpath }}" method="POST">
      {{ form_wl_delete.hidden_tag() }}
      {{ form_wl_delete.wl_del_submit() }}
  </form>
  <style>
    form {
        display:grid;
        grid-template-columns: max-content max-content;
        grid-gap:5px;
    }
    form label       { text-align:right; }
    form label:after { content: ":"; }
  </style>
</main>

<script>
  const $q = (...i) => document.querySelector(...i);
  const title = $q("#it_new_title") 
  const price = $q("#price") 
  const url = $q("#url") 
  const image = $q("#image") 
  // const description = $q("#description") 

  $q("#scrape").addEventListener("click", async e => {
    e.preventDefault()
    const tUrl = url.value.trim();

    if (!tUrl) {
      alert("Please provide a valid url.") //TODO: Replace with daisyui modal
      return
    }

    const res = await fetch(
      "/scrape?" + new URLSearchParams({
        url: tUrl
      }).toString(), 
      {
        method: "get",
      }
    )

    if (res.status !== 200) {
      alert("Failed to scrape site.")
      return
    }

    const json = await res.json()
    title.value = json.name;
    image.value = json.image;
    price.value = json.price;
  })
</script>