{% 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 looks to you. Select a theme or match your system settings.
    </p>

    {% if error %}
      <div class="mt-4 ui-alert border-rose-300 dark:border-rose-500/60 bg-rose-50 dark:bg-rose-500/10 text-rose-600 dark:text-rose-200">
        {{ error }}
      </div>
    {% endif %}

    <form class="ui-form-scope mt-6 space-y-4" method="post" action="/settings/appearance" id="theme-form">
      <!-- Light Mode Option -->
      <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"
               {% if user.theme_preference == 'light' %}checked{% endif %}
               class="h-4 w-4 text-brand-500 focus:ring-brand-500" />
        <div>
          <p class="text-[15px] font-medium text-slate-900 dark:text-slate-100">Light</p>
          <p class="text-[14px] text-slate-600 dark:text-slate-400">Use light mode</p>
        </div>
      </label>

      <!-- Dark Mode Option -->
      <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"
               {% if user.theme_preference == 'dark' %}checked{% endif %}
               class="h-4 w-4 text-brand-500 focus:ring-brand-500" />
        <div>
          <p class="text-[15px] font-medium text-slate-900 dark:text-slate-100">Dark</p>
          <p class="text-[14px] text-slate-600 dark:text-slate-400">Use dark mode</p>
        </div>
      </label>

      <!-- Auto Mode Option -->
      <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"
               {% if user.theme_preference == 'auto' %}checked{% endif %}
               class="h-4 w-4 text-brand-500 focus:ring-brand-500" />
        <div>
          <p class="text-[15px] font-medium text-slate-900 dark:text-slate-100">System</p>
          <p class="text-[14px] text-slate-600 dark:text-slate-400">Match your computer's setting</p>
        </div>
      </label>

      <button type="submit"
              class="mt-4 ui-btn-primary">
        Save Changes
      </button>
    </form>
  </div>
</div>

<script>
// Instant theme toggle on radio button change
document.querySelectorAll('input[name="theme_preference"]').forEach(function(radio) {
  radio.addEventListener('change', function(e) {
    applyTheme(e.target.value);
  });
});

function applyTheme(preference) {
  var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  var isDark = preference === 'dark' || (preference === 'auto' && prefersDark);

  document.documentElement.classList.toggle('dark', isDark);
  document.documentElement.dataset.theme = preference;
}
</script>
{% endblock %}