{% extends "base.html" %}
{% import "_macros.html" as m %}
{% block title %}Settings — Code Atlas{% endblock %}
{# The settings page — theme palette cards, ground seg, map defaults, index info,
   ported verbatim. No sidebar: the design gives settings the full width. Theme and
   map defaults live in this browser's localStorage; the inline script below applies
   choices immediately, exactly as the design's own logic does. #}

{% block main %}
<main style="flex:1;min-width:0;overflow-y:auto">
  <div style="max-width:640px;padding:24px 28px 40px">
    <h3 style="margin:0 0 4px">Settings</h3>
    <div style="font-size:12.5px;color:color-mix(in srgb, var(--color-text) 60%, transparent);margin-bottom:22px">Local to this machine. Nothing here leaves it.</div>

    <div style="background:var(--color-surface);border-radius:12px;padding:16px 16px 18px;margin-bottom:16px">
      <div style="{{ m.label10() }};margin-bottom:10px">Theme</div>
      <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;margin-bottom:16px">
        {% for id, name, note, chips in [
          ("modernist", "Modernist", "Ink on ground, one red accent.", ["#f3f2f2", "#201e1d", "#ec3013"]),
          ("cyber", "Cyber", "Cold ground, cyan ink, magenta accent. Ruled grid and glow on the map.", ["#07090d", "#4de3f0", "#ff2fbf"]),
        ] %}
        <button data-palette-pick="{{ id }}" class="hv6" style="display:flex;align-items:center;gap:11px;background:transparent;border:1px solid var(--color-divider);border-radius:10px;padding:9px 11px;cursor:pointer;color:inherit;font:inherit;text-align:left">
          <span style="display:flex;flex:none">
            {% for c in chips %}
            <span style="width:14px;height:22px;background:{{ c }};display:block;border:1px solid color-mix(in srgb, var(--color-text) 15%, transparent);margin-left:-1px"></span>
            {% endfor %}
          </span>
          <span style="flex:1;min-width:0">
            <span style="display:block;font-family:var(--font-heading);font-weight:800;font-size:13.5px">{{ name }}</span>
            <span style="display:block;margin-top:2px;font-size:11px;line-height:1.4;color:color-mix(in srgb, var(--color-text) 60%, transparent)">{{ note }}</span>
          </span>
        </button>
        {% endfor %}
      </div>
      <div style="{{ m.label10() }};margin-bottom:10px">Ground</div>
      <div class="seg" style="overflow:hidden">
        <label class="seg-opt"><input type="radio" name="theme" data-theme-pick="light"><span>Light</span></label>
        <label class="seg-opt"><input type="radio" name="theme" data-theme-pick="dark"><span>Dark</span></label>
        <label class="seg-opt"><input type="radio" name="theme" data-theme-pick="auto"><span>Follow OS</span></label>
      </div>
      <div id="theme-note" style="margin-top:10px;font-size:11.5px;color:color-mix(in srgb, var(--color-text) 60%, transparent)"></div>
    </div>

    <div style="background:var(--color-surface);border-radius:12px;padding:16px;margin-bottom:16px">
      <div style="{{ m.label10() }};margin-bottom:10px">Map defaults</div>
      <button data-default-pick="showTests" style="display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:0;border-radius:8px;padding:7px 4px;cursor:pointer;color:inherit;font:inherit;font-size:13px;text-align:left">
        <span data-toggle-slot="showTests"></span>
        <span style="flex:1">Show test modules on the map</span>
      </button>
      <button data-default-pick="showNoncode" style="display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:0;border-radius:8px;padding:7px 4px;cursor:pointer;color:inherit;font:inherit;font-size:13px;text-align:left">
        <span data-toggle-slot="showNoncode"></span>
        <span style="flex:1">Show non-code files on the map</span>
      </button>

      <div style="margin-top:12px;font-size:12.5px;font-weight:600">Direction</div>
      <div id="default-direction" style="display:flex;flex-wrap:wrap;gap:6px;margin-top:7px">
        {% for id, label, clip in [
          ("arrows", "Arrows", "polygon(0 42%, 62% 42%, 62% 20%, 100% 50%, 62% 80%, 62% 58%, 0 58%)"),
          ("taper", "Taper", "polygon(0 12%, 100% 44%, 100% 56%, 0 88%)"),
          ("fade", "Fade", "polygon(0 40%, 100% 40%, 100% 60%, 0 60%)"),
          ("flow", "Flow", "polygon(0 40%, 22% 40%, 22% 60%, 0 60%, 34% 40%, 56% 40%, 56% 60%, 34% 60%, 68% 40%, 90% 40%, 90% 60%, 68% 60%)"),
        ] %}
        <button data-display-pick="direction" data-value="{{ id }}" class="hv7" style="display:flex;align-items:center;gap:7px;background:transparent;color:var(--color-text);border:1px solid var(--color-divider);border-radius:999px;padding:4px 11px 4px 8px;cursor:pointer;font:inherit;font-size:11.5px">
          <span style="width:26px;height:10px;display:block;background:color-mix(in srgb, var(--color-text) 60%, transparent);clip-path:{{ clip }};opacity:0.7"></span>
          <span>{{ label }}</span>
        </button>
        {% endfor %}
      </div>

      <div style="margin-top:12px;font-size:12.5px;font-weight:600">Neighbourhood</div>
      <div class="seg" id="default-hops" style="width:100%;overflow:hidden;margin-top:7px">
        {% for h in ["1", "2", "3"] %}
        <button data-display-pick="hops" data-value="{{ h }}" class="seg-opt" style="flex:1;justify-content:center;background:transparent;border:0;font:inherit;cursor:pointer;color:inherit">{{ h }} hop{{ "s" if h != "1" }}</button>
        {% endfor %}
      </div>

      <div style="margin-top:12px;font-size:12.5px;font-weight:600">Labels</div>
      <div class="seg" id="default-labels" style="width:100%;overflow:hidden;margin-top:7px">
        {% for id, label in [("few", "Hubs"), ("some", "Most"), ("all", "All")] %}
        <button data-display-pick="labels" data-value="{{ id }}" class="seg-opt" style="flex:1;justify-content:center;background:transparent;border:0;font:inherit;cursor:pointer;color:inherit">{{ label }}</button>
        {% endfor %}
      </div>

      <div style="margin-top:10px;font-size:11px;line-height:1.5;color:color-mix(in srgb, var(--color-text) 60%, transparent)">How the map is drawn by default. The map's own display settings edit the same stored values, so a change made there holds here too.</div>
    </div>

    <div style="background:var(--color-surface);border-radius:12px;padding:16px">
      <div style="{{ m.label10() }};margin-bottom:10px">Index</div>
      <div style="display:flex;gap:24px;font-size:13px;line-height:1.7">
        <div>
          <div style="color:color-mix(in srgb, var(--color-text) 55%, transparent);font-size:11.5px">Storage backend</div>
          <div>{{ chrome.backend_note | replace("Backend ", "") }}</div>
        </div>
        <div>
          <div style="color:color-mix(in srgb, var(--color-text) 55%, transparent);font-size:11.5px">Last run</div>
          <div>{{ chrome.footer_indexed | replace("Indexed ", "") }}</div>
        </div>
      </div>
      <button class="btn btn-secondary" style="margin-top:12px;height:30px;font-size:12.5px" disabled title="Run `atlas index` from the CLI — the UI does not write to the graph">Re-index now</button>
    </div>
  </div>
</main>
{% endblock %}

{% block scripts %}
<script>
  // Settings wiring — applies through window.AtlasTheme (app.js) so the whole page
  // restyles the moment a choice is made, and paints the current state on load.
  (function () {
    "use strict";
    function toggleHtml(on) {
      return '<span style="width:32px;height:18px;flex:none;border-radius:999px;background:' +
        (on ? "var(--color-accent)" : "transparent") + ";border:1px solid " +
        (on ? "var(--color-accent)" : "var(--color-divider)") +
        ';position:relative;display:block"><span style="position:absolute;top:2px;left:' +
        (on ? "16px" : "2px") + ';width:12px;height:12px;border-radius:999px;background:' +
        (on ? "var(--color-bg)" : "color-mix(in srgb, var(--color-text) 45%, transparent)") +
        ';display:block"></span></span>';
    }
    function paint() {
      var palette = AtlasTheme.get("palette", "modernist");
      document.querySelectorAll("[data-palette-pick]").forEach(function (el) {
        var on = el.dataset.palettePick === palette;
        el.style.border = on ? "1px solid var(--color-accent)" : "1px solid var(--color-divider)";
        el.style.background = on ? "color-mix(in srgb, var(--color-accent) 8%, transparent)" : "transparent";
      });
      var theme = AtlasTheme.get("theme", "light");
      document.querySelectorAll("[data-theme-pick]").forEach(function (el) {
        el.checked = el.dataset.themePick === theme;
      });
      document.getElementById("theme-note").textContent = theme === "auto"
        ? "Following the OS setting via prefers-color-scheme."
        : "Overriding the OS setting for this machine.";
      ["showTests", "showNoncode"].forEach(function (key) {
        var slot = document.querySelector('[data-toggle-slot="' + key + '"]');
        if (slot) slot.outerHTML = '<span data-toggle-slot="' + key + '">' + toggleHtml(localStorage.getItem("atlas." + key) === "1") + "</span>";
      });
      // Display defaults — the same stored values the map rail edits.
      var display = {
        direction: localStorage.getItem("atlas.direction") || "arrows",
        hops: localStorage.getItem("atlas.hops") || "1",
        labels: localStorage.getItem("atlas.labels") || "some",
      };
      document.querySelectorAll("[data-display-pick]").forEach(function (el) {
        var on = el.dataset.value === display[el.dataset.displayPick];
        if (el.classList.contains("seg-opt")) {
          // Inline, because the button carries inline resets that outrank a class.
          el.style.background = on ? "var(--color-accent)" : "transparent";
          el.style.color = on ? "var(--color-bg)" : "inherit";
        } else {
          el.style.background = on ? "color-mix(in srgb, var(--color-accent) 12%, transparent)" : "transparent";
          el.style.color = on ? "var(--color-accent-700)" : "var(--color-text)";
          el.style.border = on ? "1px solid var(--color-accent)" : "1px solid var(--color-divider)";
          var swatch = el.querySelector("span");
          if (swatch) {
            swatch.style.background = on ? "var(--color-accent)" : "color-mix(in srgb, var(--color-text) 60%, transparent)";
            swatch.style.opacity = on ? "1" : "0.7";
          }
        }
      });
    }
    document.addEventListener("click", function (e) {
      var p = e.target.closest("[data-palette-pick]");
      if (p) { AtlasTheme.set("palette", p.dataset.palettePick); paint(); return; }
      var pick = e.target.closest("[data-display-pick]");
      if (pick) {
        localStorage.setItem("atlas." + pick.dataset.displayPick, pick.dataset.value);
        paint();
        return;
      }
      var d = e.target.closest("[data-default-pick]");
      if (d) {
        var key = d.dataset.defaultPick;
        localStorage.setItem("atlas." + key, localStorage.getItem("atlas." + key) === "1" ? "0" : "1");
        paint();
      }
    });
    document.addEventListener("change", function (e) {
      if (e.target.dataset && e.target.dataset.themePick) {
        AtlasTheme.set("theme", e.target.dataset.themePick);
        paint();
      }
    });
    paint();
  })();
</script>
{% endblock %}