{{define "title"}}Settings{{end}}
{{define "page"}}settings{{end}}
{{define "content"}}
<div class="csm-page-header d-print-none mb-3">
  <div class="csm-page-header__main">
    <h1 class="csm-page-header__title"><i class="ti ti-settings"></i>&nbsp;Settings</h1>
    <div class="csm-page-header__subtitle">Edit CSM configuration. Sections marked <span class="badge bg-green-lt">Applies live</span> reload without a restart; <span class="badge bg-orange-lt">Restart required</span> sections save to disk and prompt you.</div>
  </div>
</div>

<div id="settings-banner" class="alert alert-warning mb-3 d-none d-print-none" role="alert"></div>

<div class="settings-page">
  <div class="row g-3">
    <aside class="col-12 col-md-4 col-lg-3 col-xxl-2">
      <div class="card settings-nav-card">
        <div class="settings-search">
            <input type="search" id="settings-search" class="form-control form-control-sm" placeholder="Filter sections..." aria-label="Filter settings sections">
        </div>
        <nav id="settings-nav" class="settings-nav" aria-label="Settings sections"></nav>
      </div>
    </aside>
    <section class="col-12 col-md-8 col-lg-9 col-xxl-10">
      <div id="settings-panel" class="card settings-panel">
        <div class="settings-loading">
          <div class="spinner-border spinner-border-sm text-muted me-2" role="status"></div>
          Loading…
        </div>
      </div>
    </section>
  </div>
</div>
{{end}}
{{define "scripts"}}
<script src="/static/js/settings.js"></script>
{{end}}

{{template "layout" .}}