{# Vendored from governor_web/templates/settings/layout.html @ 19455c57c5a9.
   Single-user audit drops the multi-user "Personal" group entirely;
   what's left are the audit-relevant tabs. Same `flex gap-8 → nav w-48 →
   content` pattern. #}
{% extends "layout.html" %}

{% block content %}
<section class="ui-shell">
  <p class="ui-eyebrow">Setup</p>
  <h1 class="ui-page-title">Settings</h1>
  <p class="ui-page-subtitle">Per-machine configuration: account, appearance, AI, detection rules.</p>

  <div class="mt-8 flex gap-8">
    <nav class="w-48 shrink-0 space-y-1">
      <p class="px-4 pb-1 ui-card-label">Account</p>
      <a href="/admin/settings"
         class="block rounded-lg px-4 py-2 text-sm transition-colors {% if active_tab == 'profile' %}bg-slate-100 dark:bg-slate-800 text-brand-500 dark:text-brand-300{% else %}text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800/50{% endif %}">
        Profile
      </a>
      <a href="/admin/settings/appearance"
         class="block rounded-lg px-4 py-2 text-sm transition-colors {% if active_tab == 'appearance' %}bg-slate-100 dark:bg-slate-800 text-brand-500 dark:text-brand-300{% else %}text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800/50{% endif %}">
        Appearance
      </a>

      <p class="mt-4 px-4 pb-1 ui-card-label">Audit</p>
      <a href="/admin/settings/llm"
         class="block rounded-lg px-4 py-2 text-sm transition-colors {% if active_tab == 'llm' %}bg-slate-100 dark:bg-slate-800 text-brand-500 dark:text-brand-300{% else %}text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800/50{% endif %}">
        AI / LLM
      </a>
      <a href="/admin/settings/issues"
         class="block rounded-lg px-4 py-2 text-sm transition-colors {% if active_tab == 'issues' %}bg-slate-100 dark:bg-slate-800 text-brand-500 dark:text-brand-300{% else %}text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800/50{% endif %}">
        Issues
      </a>
      <a href="/admin/settings/suggestions"
         class="block rounded-lg px-4 py-2 text-sm transition-colors {% if active_tab == 'suggestions' %}bg-slate-100 dark:bg-slate-800 text-brand-500 dark:text-brand-300{% else %}text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800/50{% endif %}">
        Suggestions
      </a>
      <a href="/admin/settings/storage-billing"
         class="block rounded-lg px-4 py-2 text-sm transition-colors {% if active_tab == 'storage_billing' %}bg-slate-100 dark:bg-slate-800 text-brand-500 dark:text-brand-300{% else %}text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800/50{% endif %}">
        Storage Billing
      </a>
    </nav>

    <div class="flex-1">
      {% block settings_content %}{% endblock %}
    </div>
  </div>
</section>
{% endblock %}