{% extends "base.html" %}
{% block title %}Startup · syspanel{% endblock %}
{% block heading %}Startup Monitor{% endblock %}
{% block content %}
<div class="toolbar">
  <button id="refresh-btn">Refresh</button>
</div>
<div class="card" style="padding:0">
  <div id="loader"></div>
  <div class="table-scroll" id="table-wrap" style="display:none">
    <table class="data-table" id="table">
      <thead>
        <tr>
          <th style="width:20%">Name</th>
          <th style="width:32%">Command</th>
          <th style="width:16%">Source</th>
          <th style="width:10%">Scope</th>
          <th style="width:11%">Enabled</th>
          <th style="width:11%"></th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script type="module">
  import { api, toast, confirmModal, cachedPageLoader } from "/static/js/core.js";

  let loader;

  function render(rows) {
    document.querySelector("#table tbody").innerHTML = rows.map((e) => `
      <tr>
        <td title="${e.name}">${e.name}</td>
        <td class="faint" title="${e.command}">${e.command}</td>
        <td>${e.source}</td>
        <td>${e.scope}</td>
        <td>
          <label style="display:flex;align-items:center;gap:4px">
            <input type="checkbox" class="toggle-cb" data-id="${e.id}" ${e.enabled ? "checked" : ""}
              ${e.source === "registry_run" ? "" : "disabled"}>
          </label>
        </td>
        <td><button data-id="${e.id}" class="delete-btn danger">Delete</button></td>
      </tr>`).join("");

    document.querySelectorAll(".toggle-cb").forEach((cb) => {
      cb.addEventListener("change", async () => {
        try {
          await api("/startup/toggle", {
            method: "POST",
            body: JSON.stringify({ id: cb.dataset.id, enabled: cb.checked }),
          });
          toast(cb.checked ? "Enabled" : "Disabled", "success");
        } catch (e) {
          toast(e.message, "error");
          cb.checked = !cb.checked;
        }
      });
    });

    document.querySelectorAll(".delete-btn").forEach((btn) => {
      btn.addEventListener("click", async () => {
        const ok = await confirmModal({
          title: "Delete this startup entry?",
          body: "This permanently removes the entry (unlike disable, which is reversible).",
          confirmLabel: "Delete",
          danger: true,
        });
        if (!ok) return;
        try {
          await api("/startup/delete", { method: "POST", body: JSON.stringify({ id: btn.dataset.id }) });
          toast("Deleted", "success");
          loader.refresh();
        } catch (e) {
          toast(e.message, "error");
        }
      });
    });
  }

  loader = cachedPageLoader({
    cacheKey: "startup",
    fetchFn: () => api("/startup"),
    renderFn: render,
    loaderEl: document.getElementById("loader"),
    contentEl: document.getElementById("table-wrap"),
    refreshButton: document.getElementById("refresh-btn"),
    loadingMessage: "Enumerating startup entries…",
  });
</script>
{% endblock %}