{% extends "layout.html" %}

{% block content %}
<section class="ui-shell">
  <p class="ui-eyebrow">Account</p>
  <h1 class="ui-page-title">Settings</h1>
  <p class="ui-page-subtitle">Manage your account preferences and security.</p>

  <div class="mt-8 flex gap-8">
    <!-- Left navigation -->
    <nav class="w-48 shrink-0 space-y-1">
      <p class="px-4 pb-1 ui-card-label">Personal</p>
      <a href="/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="/settings/security"
         class="block rounded-lg px-4 py-2 text-sm transition-colors {% if active_tab == 'security' %}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 %}">
        Security
      </a>
      <a href="/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>

      {% if is_admin %}
      <p class="mt-4 px-4 pb-1 ui-card-label">Organisation</p>
      <a href="/settings/installation"
         class="block rounded-lg px-4 py-2 text-sm transition-colors {% if active_tab == 'installation' %}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 %}">
        Installation
      </a>
      <a href="/settings/auto-pr"
         class="block rounded-lg px-4 py-2 text-sm transition-colors {% if active_tab == 'auto_pr' %}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 %}">
        Auto-PR Submission
      </a>
      <a href="/settings/verification"
         class="block rounded-lg px-4 py-2 text-sm transition-colors {% if active_tab == 'verification' %}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 %}">
        Verification
      </a>
      {% endif %}
    </nav>

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