{% extends "base.html" %}
{% block title %}Dev Tools · syspanel{% endblock %}
{% block heading %}Developer Tools{% endblock %}
{% block content %}
<div class="toolbar">
  <button id="refresh-btn">Refresh</button>
</div>
<div id="loader"></div>
<div id="tables-wrap" style="display:none">
  <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:16px">
    <div class="card" style="padding:0">
      <p class="card-title" style="padding:12px 12px 0 12px">Development Tools</p>
      <div class="table-scroll">
        <table class="data-table" id="table-development">
          <thead>
            <tr>
              <th style="width:60%">Tool</th>
              <th style="width:40%">Version</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
    </div>
    <div class="card" style="padding:0">
      <p class="card-title" style="padding:12px 12px 0 12px">Infrastructure &amp; Test Automation</p>
      <div class="table-scroll">
        <table class="data-table" id="table-infrastructure">
          <thead>
            <tr>
              <th style="width:60%">Tool</th>
              <th style="width:40%">Version</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
    </div>
  </div>
</div>
{% endblock %}

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

  function rowsHtml(tools) {
    return tools.map((t) => `
      <tr>
        <td>${t.label}</td>
        <td>
          ${t.installed
            ? `<span class="pill good" style="font-weight:600">${t.version}</span>`
            : `<span class="pill">Not installed</span>`}
          ${t.path ? `<div class="faint" title="${t.path}">${t.path}</div>` : ""}
        </td>
      </tr>`).join("");
  }

  function render(inventory) {
    document.querySelector("#table-development tbody").innerHTML =
      rowsHtml(inventory.tools.filter((t) => t.category !== "infrastructure"));
    document.querySelector("#table-infrastructure tbody").innerHTML =
      rowsHtml(inventory.tools.filter((t) => t.category === "infrastructure"));
  }

  cachedPageLoader({
    cacheKey: "devtools",
    fetchFn: () => api("/devtools"),
    renderFn: render,
    loaderEl: document.getElementById("loader"),
    contentEl: document.getElementById("tables-wrap"),
    refreshButton: document.getElementById("refresh-btn"),
    loadingMessage: "Probing installed tool versions — checks ~20 tools, cached for 10 minutes after this…",
  });
</script>
{% endblock %}