{% extends "layout.html" %}
{% block body %}
<div class="page-head">
  <div>
    <h1>Ideen</h1>
    <p class="tiny">Backlog und Notizen für später.</p>
  </div>
</div>
<div class="split">
  <section class="card table-wrap">
    <table>
      <thead><tr><th>Titel</th><th>Stand</th></tr></thead>
      <tbody id="idea-rows"></tbody>
    </table>
  </section>
  <section class="card">
    <h2 id="idea-title">Neue Idee</h2>
    <form id="idea-form">
      <input id="idea-id" type="hidden">
      <div class="field"><label for="idea-name">Titel</label><input id="idea-name" required></div>
      <div class="field"><label for="idea-body">Notiz</label><textarea id="idea-body"></textarea></div>
      <div class="field"><label for="idea-status">Stand</label>
      <select id="idea-status">
        <option value="offen">offen</option>
        <option value="spaeter">später</option>
        <option value="erledigt">erledigt</option>
      </select></div>
      <div class="actions">
        <button type="submit">Merken</button>
        <button type="button" class="ghost" id="idea-new">Neu</button>
        <button type="button" class="warn" id="idea-delete"><svg class="ico"><use href="#i-trash"/></svg>Löschen</button>
      </div>
    </form>
    <p id="idea-note"></p>
  </section>
</div>
{% endblock %}
{% block script %}
<script>
let ideas = [];
const STATUS = { offen: "offen", spaeter: "später", erledigt: "erledigt" };

function fill(idea) {
  document.getElementById("idea-id").value = idea ? idea.id : "";
  document.getElementById("idea-name").value = idea ? idea.title : "";
  document.getElementById("idea-body").value = idea ? idea.body : "";
  document.getElementById("idea-status").value = idea ? idea.status : "offen";
  document.getElementById("idea-title").textContent = idea ? idea.title : "Neue Idee";
  document.getElementById("idea-delete").hidden = !idea;
}

function render() {
  const body = document.getElementById("idea-rows");
  body.innerHTML = "";
  if (!ideas.length) {
    body.innerHTML = '<tr><td class="empty" colspan="2">Noch nichts notiert.</td></tr>';
    return;
  }
  ideas.forEach((idea) => {
    const tr = document.createElement("tr");
    tr.className = "pick";
    tr.innerHTML = "<td></td><td></td>";
    tr.children[0].textContent = idea.title;
    tr.children[1].textContent = STATUS[idea.status] || idea.status;
    tr.addEventListener("click", () => fill(idea));
    body.appendChild(tr);
  });
}

async function load() {
  ideas = await api("/ideen");
  render();
}

document.getElementById("idea-form").addEventListener("submit", async (event) => {
  event.preventDefault();
  const id = document.getElementById("idea-id").value;
  const payload = {
    title: document.getElementById("idea-name").value,
    body: document.getElementById("idea-body").value,
    status: document.getElementById("idea-status").value,
  };
  try {
    const saved = id
      ? await api("/ideen/" + id, { method: "PATCH", json: payload })
      : await api("/ideen", { method: "POST", json: payload });
    document.getElementById("idea-note").textContent = "Gemerkt.";
    document.getElementById("idea-note").className = "ok";
    await load();
    fill(saved);
  } catch (error) {
    showNote("idea-note", error);
  }
});
document.getElementById("idea-new").addEventListener("click", () => fill(null));
document.getElementById("idea-delete").addEventListener("click", (event) => {
  const id = document.getElementById("idea-id").value;
  if (!id) return;
  armButton(event.currentTarget, "Idee löschen?", async () => {
    try {
      await api("/ideen/" + id, { method: "DELETE" });
      toast("Idee gelöscht.");
      await load();
      fill(null);
    } catch (error) {
      showNote("idea-note", error);
    }
  });
});
load().then(() => fill(null)).catch((error) => showNote("idea-note", error));
</script>
{% endblock %}