{% set cpath = url_for("edit", id=wishlist.editId) %}
{% extends "base.html" %}

{% block content %}
  <main class="bg-base-100">
    <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>
{% endblock content %}