{% extends "base.html" %}
{% block content %}
<main class="w-full h-full min-h-0 px-20 pt-5 overflow-y-scroll">
  <!-- Wishlist Title Card -->
  <div class="w-full bg-base-100 p-5 rounded-lg shadow-md mb-5">
    <h1 class="text-2xl font-bold">{{wishlist.title}}</h1>
    <p class="text-gray-600">{{wishlist.description}}</p>
  </div>

  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 overflow-y-scroll mb-5">
    {% for item in wishlist.items %}
      <div class="card bg-base-100 image-full shadow-md h-full flex flex-col">
        <figure class="flex-grow">
          <img
            src="{{item.image}}"
            alt="{{ item.title }}" 
            class="object-cover h-full w-full rounded-t-lg" />
        </figure>
        <div class="card-body flex flex-col flex-grow">
          <h2 class="card-title">{{ item.title }}</h2>
          <p class="flex-grow">{{ item.description }}</p>
          <div class="card-actions justify-end">
            <div class="{{ "join" if not item.bought }}"><a class="btn btn-soft {{ "join-item" if not item.bought }}" href="{{ item.url }}" {{ "hidden" if item.bought }}>{{ "€" ~ item.price if not item.bought }}</a>
            <form method="POST" action="{{ url_for('view', id=wishlist.viewId) }}" class="contents">
              <button class="buy btn btn-soft btn-primary {{ "join-item" if not item.bought }}" {{ "disabled" if item.bought }}>{{ "Reserved" if item.bought else "Reserve" }}</button>
              {{ form.csrf_token }}
              {{ form.num(value=loop.index) }}
            </form></div>
          </div>
        </div>
      </div>
    {% endfor %}
  </div>
</main>


<dialog class="modal">
  <div class="modal-box">
    <h3 class="text-lg font-bold">Important!</h3>
    <p class="py-4">Are you sure you bought this product? You won't be able to undo this.</p>
    <div class="modal-action">
      <form method="dialog" class="join">
        <button id="dialog-confirm-no" class="btn btn-soft join-item">Close</button>
        <button id="dialog-confirm-ok" class="btn btn-soft btn-primary join-item">OK</button>
      </form>
    </div>
  </div>
</dialog>
<dialog class="modal" {{ "open" if wishlist.items|length < 1 }}>
  <div class="modal-box">
    <h3 class="text-lg font-bold">Still empty!</h3>
    <p class="py-4">Hi there. It seems like you are here a bit too early, the wishlist is still empty. Please come back later.</p>
    <div class="modal-action">
      <form method="dialog">
        <a class="btn" href="/">Go back</a>
      </form>
    </div>
  </div>
</dialog>

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

  const items = Array.from($all(".buy"));
  const dialog = $("dialog");
  const dialogOk = $("#dialog-confirm-ok");
  const dialogNo = $("#dialog-confirm-no");

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

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

        dialog.show();
      });
  }
</script>
{% endblock content %}