{{define "title"}}Preferences{{end}}
{{define "content"}}
<div class="preferences-container">
  <h1 class="preferences-title">Preferences</h1>

  <form class="preferences-form" method="POST" action="/preferences">
    <input type="hidden" name="theme" id="theme-input" value="light">

    <section class="pref-section">
      <h2 class="pref-section-title">Appearance</h2>
      <div class="pref-row">
        <label>Theme</label>
        <div class="theme-buttons">
          <button type="button" class="theme-btn active" data-theme="light">Light</button>
          <button type="button" class="theme-btn" data-theme="dark">Dark</button>
        </div>
      </div>
    </section>

    <section class="pref-section">
      <h2 class="pref-section-title">Search Engines</h2>
      <p class="pref-desc">Select which engines to use for searches.</p>
      <div class="engine-grid">
        <label class="engine-toggle">
          <input type="checkbox" name="engine" value="google" checked>
          <span>Google</span>
        </label>
        <label class="engine-toggle">
          <input type="checkbox" name="engine" value="duckduckgo" checked>
          <span>DuckDuckGo</span>
        </label>
        <label class="engine-toggle">
          <input type="checkbox" name="engine" value="bing" checked>
          <span>Bing</span>
        </label>
        <label class="engine-toggle">
          <input type="checkbox" name="engine" value="brave" checked>
          <span>Brave</span>
        </label>
        <label class="engine-toggle">
          <input type="checkbox" name="engine" value="wikipedia" checked>
          <span>Wikipedia</span>
        </label>
        <label class="engine-toggle">
          <input type="checkbox" name="engine" value="github">
          <span>GitHub</span>
        </label>
        <label class="engine-toggle">
          <input type="checkbox" name="engine" value="reddit">
          <span>Reddit</span>
        </label>
        <label class="engine-toggle">
          <input type="checkbox" name="engine" value="youtube">
          <span>YouTube</span>
        </label>
      </div>
    </section>

    <section class="pref-section">
      <h2 class="pref-section-title">Privacy</h2>
      <div class="pref-row">
        <div class="pref-row-info">
          <label>Safe Search</label>
          <p class="pref-desc">Filter explicit content from results</p>
        </div>
        <select name="safesearch">
          <option value="0">Off</option>
          <option value="1" selected>Moderate</option>
          <option value="2">Strict</option>
        </select>
      </div>
    </section>

    <section class="pref-section">
      <h2 class="pref-section-title">Language</h2>
      <div class="pref-row">
        <label for="search-lang">Interface &amp; Search Language</label>
        <select name="language" id="search-lang">
          <option value="all" selected>All languages</option>
          <option value="en">English</option>
          <option value="de">Deutsch</option>
          <option value="fr">Français</option>
          <option value="es">Español</option>
          <option value="zh">中文</option>
          <option value="ja">日本語</option>
          <option value="ru">Русский</option>
        </select>
      </div>
    </section>

    <div class="pref-actions">
      <a href="/" class="btn-secondary">Cancel</a>
      <button type="submit" class="btn-primary">Save Preferences</button>
    </div>
  </form>
</div>

<script>
(function() {
  // Theme buttons
  var themeInput = document.getElementById('theme-input');
  var themeButtons = document.querySelectorAll('.theme-btn');

  // Load saved theme
  var savedTheme = localStorage.getItem('kafka-theme') || 'light';
  themeInput.value = savedTheme;
  document.querySelectorAll('.theme-btn').forEach(function(btn) {
    btn.classList.toggle('active', btn.dataset.theme === savedTheme);
  });
  document.documentElement.setAttribute('data-theme', savedTheme);

  themeButtons.forEach(function(btn) {
    btn.addEventListener('click', function() {
      var theme = btn.dataset.theme;
      themeInput.value = theme;
      themeButtons.forEach(function(b) { b.classList.remove('active'); });
      btn.classList.add('active');
      document.documentElement.setAttribute('data-theme', theme);
      localStorage.setItem('kafka-theme', theme);
    });
  });

  // Load saved engine preferences
  var savedEngines = JSON.parse(localStorage.getItem('kafka-engines') || 'null');
  if (savedEngines) {
    savedEngines.forEach(function(engine) {
      var checkbox = document.querySelector('input[name="engine"][value="' + engine.id + '"]');
      if (checkbox) checkbox.checked = engine.enabled;
    });
  }

  // Save on submit
  document.querySelector('.preferences-form').addEventListener('submit', function() {
    var engines = [];
    document.querySelectorAll('input[name="engine"]').forEach(function(cb) {
      engines.push({ id: cb.value, enabled: cb.checked });
    });
    localStorage.setItem('kafka-engines', JSON.stringify(engines));
  });
})();
</script>
{{end}}