{% extends "base.html" %}
{% import "_connection_summary.html" as summaries %}
{% import "_icons.html" as icons %}
{% block app_body %}
{% set tab_items = [
  ("server", "Server", "/admin/settings/server", "server"),
  ("routing", "Routing", "/admin/settings/routing", "routing"),
  ("providers", "Providers", "/admin/settings/providers", "providers"),
  ("pricing", "Pricing", "/admin/settings/pricing", "pricing"),
  ("diagnostics", "Diagnostics", "/admin/settings/diagnostics", "diagnostics"),
  ("data", "Data", "/admin/settings/data", "data")
] %}
<aside class="settings-sidebar" aria-label="Settings sections">
  <div class="sidebar-header">
    <span class="sidebar-title">Settings</span>
    <span class="sidebar-subtitle">v0.7 control plane</span>
  </div>
  <nav class="sidebar-nav">
    {% for key, label, href, icon in tab_items %}
    <a class="sidebar-nav-item {{ 'active' if settings_tab == key else '' }}" href="{{ href }}">
      <span class="nav-icon" aria-hidden="true">{{ icons.icon(icon, class_name="ui-icon sidebar-svg") }}</span>
      <span>{{ label }}</span>
    </a>
    {% endfor %}
  </nav>
  <div class="sidebar-env-card">
    <span>Environment</span>
    <strong>Local development</strong>
    <small>{{ incoming_host }}:{{ incoming_port }} / {{ app_version }}</small>
  </div>
</aside>

<main
  class="settings-content"
  data-live-page="settings"
  data-settings-tab="{{ settings_tab }}"
  data-api-url="/admin/api/settings/{{ settings_tab }}"
>
  <section class="settings-hero">
    <div>
      <p class="eyebrow">Admin</p>
      <h1>Settings</h1>
    </div>
    <div class="settings-hero-meta">
      <span>{{ settings_tab | title }}</span>
      <span data-settings-stored-rows>Loading stored rows…</span>
    </div>
  </section>

  {% if error %}
  <div class="alert">{{ error }}</div>
  {% endif %}

  <div class="settings-live-bar">
    <div class="live-status" data-settings-status aria-live="polite">Loading settings…</div>
    <button class="button ghost compact-button" type="button" data-settings-refresh>Refresh</button>
  </div>

  <section
    class="connection-summary"
    aria-label="Connection summary"
    data-settings-summary
  >
    <article class="summary-card"><span class="summary-icon">…</span><strong>Settings data</strong></article>
  </section>

  <nav class="tab-bar" aria-label="Settings tabs">
    {% for key, label, href, icon in tab_items %}
    <a class="tab-item {{ 'active' if settings_tab == key else '' }}" href="{{ href }}">
      <span aria-hidden="true">{{ icons.icon(icon, class_name="ui-icon tab-svg") }}</span>
      <span>{{ label }}</span>
    </a>
    {% endfor %}
  </nav>

  {% block settings_content %}{% endblock %}
</main>
{% endblock %}