{{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="hint" style="margin-top:10px">Applies instantly and is saved in this browser.</p>
      <p class="admin-link-row"><a class="admin-link" href="/admin">Admin</a></p>
    </div>
  </div>
</div>
<script>
(function () {
  var themes = [
    { id: 'midnight',        name: 'Midnight',        colors: ['#241B30', '#2D2340', '#3A2D52', '#7A6A9E', '#C4A8F0'] },
    { id: 'smooth',          name: 'Smooth',          colors: ['#F6F5FA', '#DAD7E6', '#B5B1C9', '#7A7796', '#2A2A36'] },
    { id: 'pastel-lavender', name: 'Pastel Lavender', colors: ['#e6e0f5', '#cbb8e7', '#b29edb', '#9b85cf', '#806bb8'] },
    { id: 'pastel-peach',    name: 'Pastel Peach',    colors: ['#ffe0d6', '#ffc4a8', '#ffa78f', '#ff8b76', '#f9826c'] },
    { id: 'pastel-cloud',    name: 'Pastel Cloud',    colors: ['#cdb4db', '#ffc8dd', '#ffafcc', '#bde0fe', '#a2d2ff'] }
  ];
  var grid = document.getElementById('theme-grid');
  var current = document.documentElement.dataset.preset || 'midnight';
  themes.forEach(function (t) {
    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" .}}