{{template "head" .}}
{{template "topbar" .}}
<div class="page">
  <div class="float">
    <div class="settings-head">
      <h1>Settings</h1>
    </div>
    <div class="settings-body">
      <h3>Theme</h3>
      <div class="theme-grid" id="theme-grid"></div>
      <p class="admin-link-row"><a class="admin-link" href="/admin">Admin</a></p>
    </div>
  </div>
</div>
<script>
(function () {
  // #112: derive each preset's swatches from the real CSS variables in
  // app.css by temporarily applying data-preset, so they can never drift.
  var themeNames = [
    { id: 'midnight',        name: 'Midnight' },
    { id: 'smooth',          name: 'Smooth' },
    { id: 'pastel-lavender', name: 'Pastel Lavender' },
    { id: 'pastel-peach',    name: 'Pastel Peach' },
    { id: 'pastel-cloud',    name: 'Pastel Cloud' }
  ];
  var SWATCH_VARS = ['--bg', '--surface', '--surface-2', '--muted', '--accent'];

  function presetColors(id) {
    var root = document.documentElement;
    var prev = root.getAttribute('data-preset');
    root.setAttribute('data-preset', id);
    var cs = getComputedStyle(root);
    var colors = SWATCH_VARS.map(function (v) { return cs.getPropertyValue(v).trim(); });
    if (prev === null) root.removeAttribute('data-preset'); else root.setAttribute('data-preset', prev);
    return colors;
  }

  var grid = document.getElementById('theme-grid');
  var current = document.documentElement.dataset.preset || 'midnight';
  themeNames.forEach(function (t) {
    var colors = presetColors(t.id);
    var btn = document.createElement('button');
    btn.type = 'button';
    btn.className = 'theme-card';
    btn.setAttribute('aria-pressed', current === t.id ? 'true' : 'false');
    btn.innerHTML = '<strong>' + t.name + '</strong>' +
      '<span class="swatches">' + t.colors.map(function (c) {
        return '<span class="swatch" style="background:' + c + '"></span>';
      }).join('') + '</span>';
    btn.addEventListener('click', function () {
      document.documentElement.dataset.preset = t.id;
      try { localStorage.setItem('palette-theme', t.id); } catch (e) {}
      grid.querySelectorAll('.theme-card').forEach(function (c) { c.setAttribute('aria-pressed', 'false'); });
      btn.setAttribute('aria-pressed', 'true');
    });
    grid.appendChild(btn);
  });
})();
</script>
{{template "foot" .}}