{# Audit appearance — vendored from governor_web/templates/settings/appearance.html.
   The audit doesn't persist a per-user preference (no users table),
   so the radio writes to localStorage and the layout boot script
   already reads it. Same Light / Dark / System pattern. #}
{% extends "settings/layout.html" %}

{% block settings_content %}
<div class="space-y-6">
  <div class="ui-pane">
    <h2 class="ui-section-title">Theme</h2>
    <p class="ui-section-subtitle">
      Choose how Governor Audit looks. Stored in your browser only — no per-user account, no persistence across machines.
    </p>

    <form class="ui-form-scope mt-6 space-y-4" id="theme-form">
      <label class="flex items-center gap-4 border p-4 cursor-pointer
                    border-slate-200 dark:border-slate-700
                    hover:border-brand-200 dark:hover:border-brand-500/50
                    has-checked:border-brand-500 has-checked:bg-brand-50 dark:has-checked:bg-brand-500/10">
        <input type="radio" name="theme_preference" value="light"
               class="h-4 w-4 text-brand-500 focus:ring-brand-500 theme-radio" />
        <div>
          <p class="text-base font-medium text-slate-900 dark:text-slate-100">Light</p>
          <p class="text-sm text-slate-600 dark:text-slate-400">Use light mode</p>
        </div>
      </label>

      <label class="flex items-center gap-4 border p-4 cursor-pointer
                    border-slate-200 dark:border-slate-700
                    hover:border-brand-200 dark:hover:border-brand-500/50
                    has-checked:border-brand-500 has-checked:bg-brand-50 dark:has-checked:bg-brand-500/10">
        <input type="radio" name="theme_preference" value="dark"
               class="h-4 w-4 text-brand-500 focus:ring-brand-500 theme-radio" />
        <div>
          <p class="text-base font-medium text-slate-900 dark:text-slate-100">Dark</p>
          <p class="text-sm text-slate-600 dark:text-slate-400">Use dark mode</p>
        </div>
      </label>

      <label class="flex items-center gap-4 border p-4 cursor-pointer
                    border-slate-200 dark:border-slate-700
                    hover:border-brand-200 dark:hover:border-brand-500/50
                    has-checked:border-brand-500 has-checked:bg-brand-50 dark:has-checked:bg-brand-500/10">
        <input type="radio" name="theme_preference" value="auto"
               class="h-4 w-4 text-brand-500 focus:ring-brand-500 theme-radio" />
        <div>
          <p class="text-base font-medium text-slate-900 dark:text-slate-100">System</p>
          <p class="text-sm text-slate-600 dark:text-slate-400">Match your computer's setting</p>
        </div>
      </label>
    </form>
  </div>
</div>

<script>
  (function() {
    var stored = localStorage.getItem('governor_audit_theme') || 'auto';
    document.querySelectorAll('.theme-radio').forEach(function(r) {
      if (r.value === stored) r.checked = true;
      r.addEventListener('change', function(e) {
        var pref = e.target.value;
        localStorage.setItem('governor_audit_theme', pref);
        var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        var isDark = pref === 'dark' || (pref === 'auto' && prefersDark);
        document.documentElement.classList.toggle('dark', isDark);
        document.documentElement.dataset.theme = pref;
      });
    });
  })();
</script>
{% endblock %}