{% extends 'base.html.twig' %}
{% block title %}Settings{% endblock %}
{% block body %}
  <h1 class="h4 mb-3">Settings</h1>

  <div class="card">
    <div class="card-body">
      <h2 class="h6">Appearance</h2>
      <div class="form-check form-switch mt-2">
        <input class="form-check-input" type="checkbox" role="switch" id="themeToggle">
        <label class="form-check-label" for="themeToggle">Dark mode</label>
      </div>
      <small class="text-secondary">Your choice is saved in a cookie.</small>
    </div>
  </div>

  <script>
    (function(){
      const key = 'theme';
      const root = document.documentElement;
      const current = (document.cookie.match(/(?:^|; )theme=([^;]+)/)?.[1] || '').replace(/\+/g,' ');
      const initial = current || root.getAttribute('data-bs-theme') || 'light';
      const toggle = document.getElementById('themeToggle');
      toggle.checked = initial === 'dark';
      function setTheme(t){
        root.setAttribute('data-bs-theme', t);
        const d = new Date(); d.setFullYear(d.getFullYear()+1);
        document.cookie = key+'='+t+'; path=/; SameSite=Lax; expires='+d.toUTCString();
      }
      toggle.addEventListener('change', ()=> setTheme(toggle.checked ? 'dark' : 'light'));
    })();
  </script>
{% endblock %}