{# Design tokens + frontend runtime.

   The variables below are shadcn/ui's stock Zinc theme, and every class
   string in polyadmin/ui.py resolves to them rather than to a literal
   Tailwind palette -- so restyling the admin, or flipping it to dark, is
   a change to these variables and nothing else.

   Script order is load-order-critical, top to bottom:

     1. the dark-class script must run synchronously before paint, or a
        dark-mode reload flashes the light palette for a frame;
     2. the Tailwind CDN script must load *before* `tailwind.config` is
        assigned -- backwards from what you would guess. That script is
        what defines the global `tailwind`, so assigning to it first
        throws a ReferenceError the browser swallows, and every
        token-based utility then resolves to nothing;
     3. Alpine plugins must load before Alpine core, which initializes
        on load and only sees directives registered by then.

   Everything is CDN-loaded: there is no frontend build step. #}
<script>
  // (1) Pre-paint theme resolution -- see the note above.
  (function () {
    try {
      var stored = localStorage.getItem("polyadmin-theme");
      var dark = stored
        ? stored === "dark"
        : window.matchMedia("(prefers-color-scheme: dark)").matches;
      document.documentElement.classList.toggle("dark", dark);
    } catch (e) {
      /* localStorage unavailable (private mode, file://) -- stay light. */
    }
  })();
</script>

<script src="https://cdn.tailwindcss.com"></script>
<script>
  // (2) Tailwind Play CDN configuration -- the CDN script above must
  // load first, since it's what defines the `tailwind` global this
  // assigns onto (see the note above). `<alpha-value>` is what lets the
  // opacity modifiers the shadcn class lists rely on -- bg-primary/90,
  // bg-muted/50, border-destructive/50 -- resolve against a CSS
  // variable holding a bare HSL triplet.
  tailwind.config = {
    darkMode: "class",
    theme: {
      extend: {
        fontFamily: {
          sans: [
            "ui-sans-serif", "system-ui", "-apple-system", "Segoe UI",
            "Roboto", "Helvetica Neue", "Arial", "sans-serif",
          ],
        },
        borderRadius: {
          lg: "var(--radius)",
          md: "calc(var(--radius) - 2px)",
          sm: "calc(var(--radius) - 4px)",
        },
        colors: {
          border: "hsl(var(--border) / <alpha-value>)",
          input: "hsl(var(--input) / <alpha-value>)",
          ring: "hsl(var(--ring) / <alpha-value>)",
          background: "hsl(var(--background) / <alpha-value>)",
          foreground: "hsl(var(--foreground) / <alpha-value>)",
          primary: {
            DEFAULT: "hsl(var(--primary) / <alpha-value>)",
            foreground: "hsl(var(--primary-foreground) / <alpha-value>)",
          },
          secondary: {
            DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
            foreground: "hsl(var(--secondary-foreground) / <alpha-value>)",
          },
          destructive: {
            DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
            foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",
          },
          muted: {
            DEFAULT: "hsl(var(--muted) / <alpha-value>)",
            foreground: "hsl(var(--muted-foreground) / <alpha-value>)",
          },
          accent: {
            DEFAULT: "hsl(var(--accent) / <alpha-value>)",
            foreground: "hsl(var(--accent-foreground) / <alpha-value>)",
          },
          popover: {
            DEFAULT: "hsl(var(--popover) / <alpha-value>)",
            foreground: "hsl(var(--popover-foreground) / <alpha-value>)",
          },
          card: {
            DEFAULT: "hsl(var(--card) / <alpha-value>)",
            foreground: "hsl(var(--card-foreground) / <alpha-value>)",
          },
          chart: {
            1: "hsl(var(--chart-1) / <alpha-value>)",
            2: "hsl(var(--chart-2) / <alpha-value>)",
            3: "hsl(var(--chart-3) / <alpha-value>)",
            4: "hsl(var(--chart-4) / <alpha-value>)",
            5: "hsl(var(--chart-5) / <alpha-value>)",
            6: "hsl(var(--chart-6) / <alpha-value>)",
          },
        },
      },
    },
  };
</script>

{# (3) Alpine plugins, then Alpine core, then HTMX. SortableJS is
   deferred so it is ready before any x-init calling Sortable.create,
   and is the one non-Alpine dependency: drag-and-drop has no small
   CSS-only equivalent. #}
<script defer src="https://unpkg.com/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
<script defer src="https://unpkg.com/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
<script defer src="https://unpkg.com/@alpinejs/anchor@3.x.x/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
<script>
  // One listener covers every mutating hx-* attribute in the admin --
  // including the bodyless hx-deletes, which have no form field to
  // carry a token -- and any added later.
  //
  // On `document`, not `document.body`: this file is included from
  // base.html's <head>, where document.body is still null. htmx's
  // events bubble, so the document catches them all either way.
  document.addEventListener("htmx:configRequest", function (evt) {
    if (/^(GET|HEAD|OPTIONS|TRACE)$/i.test(evt.detail.verb)) return;
    var meta = document.querySelector('meta[name="csrf-token"]');
    if (meta) evt.detail.headers["X-CSRF-Token"] = meta.content;
  });

  // Dates and decimals are rendered as ISO values and formatted here, in
  // the page's locale, so both implementations display them identically.
  // A date-only value is built from its parts: new Date("YYYY-MM-DD")
  // parses as UTC midnight, the previous day west of Greenwich. The
  // Date constructor maps years 0-99 onto 1900-1999, so the year is set
  // again with setFullYear, which does not.
  //
  // One Intl formatter per format, built on first use. Each value is
  // formatted on its own: an unknown lang or an option out of range
  // throws, and that leaves the one value in its ISO form rather than
  // aborting the page. A decimal goes to NumberFormat as its string, which
  // engines that support it format exactly (a Number would round past 15
  // or so digits); older ones convert it to a Number themselves.
  window.polyadminFormat = function (root) {
    var lang = document.documentElement.lang || undefined, cache = {};
    function formatter(key, make) {
      if (!Object.prototype.hasOwnProperty.call(cache, key)) cache[key] = make();
      return cache[key];
    }
    root.querySelectorAll("time[data-format]").forEach(function (el) {
      try {
        var iso = el.getAttribute("datetime"), d, m;
        if (el.dataset.format === "date") {
          m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso);
          if (!m) return;
          d = new Date(+m[1], +m[2] - 1, +m[3]);
          d.setFullYear(+m[1], +m[2] - 1, +m[3]);
          el.textContent = formatter("date", function () {
            return new Intl.DateTimeFormat(lang, { dateStyle: "medium" });
          }).format(d);
        } else {
          m = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})(?::(\d{2}))?/.exec(iso);
          if (!m) return;
          if (/(Z|[+-]\d{2}:\d{2})$/.test(iso)) {
            d = new Date(iso);
          } else {
            d = new Date(+m[1], +m[2] - 1, +m[3], +m[4], +m[5], +(m[6] || 0));
            d.setFullYear(+m[1], +m[2] - 1, +m[3]);
          }
          el.textContent = formatter("datetime", function () {
            return new Intl.DateTimeFormat(lang, { dateStyle: "medium", timeStyle: "short" });
          }).format(d);
        }
      } catch (err) {
        // Keep the ISO text.
      }
    });
    root.querySelectorAll('[data-format="decimal"]').forEach(function (el) {
      try {
        var raw = el.dataset.value;
        if (raw === "" || !isFinite(Number(raw))) return;
        // NumberFormat accepts at most 20 fraction digits.
        var digits = Math.min((raw.split(".")[1] || "").length, 20);
        el.textContent = formatter("decimal" + digits, function () {
          return new Intl.NumberFormat(lang, { minimumFractionDigits: digits, maximumFractionDigits: digits });
        }).format(raw);
      } catch (err) {
        // Keep the raw text.
      }
    });
  };

  // prepopulated_fields (docs/model-admin.md): fill a field from others as
  // they are typed. Create forms only -- the server omits the attribute on
  // an edit form, because an existing record's slug is a real identifier.
  //
  // The slug rule mirrors the server's Slugify: transliterate, lowercase,
  // collapse the rest into single hyphens. The Cyrillic table is the same
  // data, kept here so the browser needs no round trip.
  var CYRILLIC = {
    "а":"a","б":"b","в":"v","г":"g","д":"d","е":"e","ё":"yo","ж":"zh","з":"z",
    "и":"i","й":"y","к":"k","л":"l","м":"m","н":"n","о":"o","п":"p","р":"r",
    "с":"s","т":"t","у":"u","ф":"f","х":"kh","ц":"ts","ч":"ch","ш":"sh",
    "щ":"shch","ъ":"","ы":"y","ь":"","э":"e","ю":"yu","я":"ya"
  };
  function polyadminSlugify(value, keepUnicode) {
    var mapped = "";
    for (var i = 0; i < value.length; i++) {
      var ch = value[i], lower = ch.toLowerCase();
      mapped += (!keepUnicode && CYRILLIC.hasOwnProperty(lower)) ? CYRILLIC[lower] : ch;
    }
    mapped = mapped.toLowerCase();
    if (!keepUnicode) {
      // Decompose, drop the combining marks an accent decomposed into, then
      // drop whatever is still not ASCII.
      mapped = mapped.normalize("NFD").replace(/[̀-ͯ]/g, "").replace(/[^\x00-\x7F]/g, "");
    }
    var pattern = keepUnicode ? /[^\p{L}\p{N}]+/gu : /[^a-z0-9]+/g;
    return mapped.replace(pattern, "-").replace(/^-+|-+$/g, "");
  }
  window.polyadminPrepopulate = function (root) {
    root.querySelectorAll("form[data-prepopulated]").forEach(function (form) {
      var spec;
      try {
        spec = JSON.parse(form.dataset.prepopulated);
      } catch (err) {
        return;
      }
      Object.keys(spec).forEach(function (name) {
        var target = form.querySelector('[name="' + name + '"]');
        if (!target || target.dataset.prepopulateBound) return;
        target.dataset.prepopulateBound = "1";
        // Typing in the target detaches it for the rest of the form's life,
        // and a value already there is never overwritten.
        var detached = target.value !== "";
        target.addEventListener("input", function () { detached = true; });
        var sources = (spec[name].from || []).map(function (from) {
          return form.querySelector('[name="' + from + '"]');
        }).filter(Boolean);
        var fill = function () {
          if (detached) return;
          var parts = sources.map(function (el) { return el.value; }).filter(Boolean);
          target.value = polyadminSlugify(parts.join(" "), !!spec[name].unicode);
        };
        sources.forEach(function (el) { el.addEventListener("input", fill); });
      });
    });
  };
  document.addEventListener("DOMContentLoaded", function () { window.polyadminFormat(document); window.polyadminPrepopulate(document); });
  document.addEventListener("htmx:load", function (evt) { window.polyadminFormat(evt.detail.elt); window.polyadminPrepopulate(evt.detail.elt); });
</script>

<style>
  /* shadcn/ui's stock "Zinc" palette, as bare HSL triplets. */
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 72.2% 50.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 5.9% 10%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 44%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --chart-6: 262 60% 62%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 5.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 5.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 45%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    --chart-6: 190 70% 45%;
  }

  [x-cloak] { display: none !important; }

  /* Alpine's x-collapse animates height; without this the accordion
     content jumps its scrollbar in during the transition. */
  [x-collapse] { overflow: hidden; }

  /* Checkbox check glyph (lucide Check, the icon shadcn/ui's Checkbox
     uses). It lives here rather than in ui("checkbox") for two reasons:
     a native <input> cannot carry a ::before/::after reliably, so the
     mark has to be a background image; and its colour is
     --primary-foreground, which flips with the theme and cannot be
     interpolated into a Tailwind arbitrary value. Hence one rule per
     theme, matching the two token values in this file. */
  .ui-checkbox:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fafafa' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    background-size: 0.7rem;
    background-position: center;
    background-repeat: no-repeat;
  }
  /* ScrollArea (ui("scroll-area")). Radix draws a custom scrollbar over
     a hidden native one; this restyles the native one instead, which
     needs real CSS -- Tailwind has no scrollbar utilities without a
     plugin. Thin, token-coloured, and only visible where it is needed. */
  .ui-scroll-area {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--border)) transparent;
    /* Without this, wheel input that outruns the box's own scroll range
       chains into whichever ancestor scrolls next -- on a page-level
       scroller that is a sudden jump of the whole page, which reads as
       broken rather than as "reached the end of this list." */
    overscroll-behavior: contain;
  }
  .ui-scroll-area::-webkit-scrollbar { width: 6px; height: 6px; }
  .ui-scroll-area::-webkit-scrollbar-track { background: transparent; }
  .ui-scroll-area::-webkit-scrollbar-thumb {
    background-color: hsl(var(--border));
    border-radius: 9999px;
  }
  .ui-scroll-area:hover::-webkit-scrollbar-thumb {
    background-color: hsl(var(--muted-foreground) / 0.5);
  }

  .dark .ui-checkbox:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2318181b' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  }
</style>

<script>
  // The theme store backing the header's toggle (ui/theme-toggle).
  // Registered on alpine:init so it exists before any component that
  // reads $store.theme is initialized.
  document.addEventListener("alpine:init", function () {
    Alpine.store("theme", {
      dark: document.documentElement.classList.contains("dark"),
      toggle() {
        this.dark = !this.dark;
        document.documentElement.classList.toggle("dark", this.dark);
        try {
          localStorage.setItem("polyadmin-theme", this.dark ? "dark" : "light");
        } catch (e) {
          /* Preference just doesn't persist; the toggle still works. */
        }
      },
    });
  });
</script>