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

  <form class="preferences-form" method="POST" action="/preferences">

    <section class="pref-section">
      <h2 class="pref-section-title">Appearance</h2>
      <div class="pref-row">
        <label>Theme</label>
        <span class="theme-info">Follows system preference</span>
      </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>
      <div class="pref-row">
        <div class="pref-row-info">
          <label>Favicon Service</label>
          <p class="pref-desc">Fetch favicons for result URLs. "None" is most private.</p>
        </div>
        <select name="favicon" id="pref-favicon">
          <option value="none" selected>None</option>
          <option value="google">Google</option>
          <option value="duckduckgo">DuckDuckGo</option>
          <option value="self">Self (Kafka)</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() {
  // Load saved engine preferences
  var savedEngines = JSON.parse(localStorage.getItem('samsa-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('samsa-engines', JSON.stringify(engines));
  });
})();
</script>
{{end}}