{% extends "base.html" %}

{% block content %}
  <div class="settings-grid">
    <section class="panel settings-panel" aria-labelledby="appearance-title">
      <div class="panel-heading">
        <div>
          <p class="section-kicker">Display</p>
          <h2 id="appearance-title">Appearance</h2>
        </div>
      </div>
      <p class="settings-description">
        Follow your Mac automatically, or keep an explicit preference on this
        device. This visual choice never changes Curio.
      </p>
      <div class="theme-options" role="group" aria-label="Color theme">
        <button type="button" data-theme-choice="system">
          <span class="theme-swatch swatch-system" aria-hidden="true"></span>
          <strong>System</strong>
          <small>Match macOS</small>
        </button>
        <button type="button" data-theme-choice="light">
          <span class="theme-swatch swatch-light" aria-hidden="true"></span>
          <strong>Light</strong>
          <small>Warm paper</small>
        </button>
        <button type="button" data-theme-choice="dark">
          <span class="theme-swatch swatch-dark" aria-hidden="true"></span>
          <strong>Dark</strong>
          <small>Quiet evening</small>
        </button>
      </div>
    </section>

    <section class="panel settings-panel" aria-labelledby="refresh-title">
      <div class="panel-heading">
        <div>
          <p class="section-kicker">Freshness</p>
          <h2 id="refresh-title">Refresh cadence</h2>
        </div>
      </div>
      <dl class="settings-list">
        <div>
          <dt>Project data</dt>
          <dd>Every {{ service_config.dashboard.refresh_seconds if service_config else 60 }} seconds</dd>
        </div>
        <div>
          <dt>Project Center</dt>
          <dd>Every {{ service_config.dashboard.discovery_refresh_seconds if service_config else 300 }} seconds</dd>
        </div>
        <div>
          <dt>Workflow board</dt>
          <dd>{{ state.board.tag_set or "No tag set" }}</dd>
        </div>
      </dl>
      <p class="settings-note">
        Existing snapshots stay visible while a refresh runs or if one project
        cannot be read.
      </p>
    </section>

    <section class="panel settings-panel settings-wide" aria-labelledby="boundary-title">
      <div class="panel-heading">
        <div>
          <p class="section-kicker">Trust boundary</p>
          <h2 id="boundary-title">Local and read-only by design</h2>
        </div>
      </div>
      <div class="boundary-grid">
        <div>
          <span class="boundary-mark" aria-hidden="true">1</span>
          <h3>Project Center decides scope</h3>
          <p>Only paths returned by the latest category response are accepted.</p>
        </div>
        <div>
          <span class="boundary-mark" aria-hidden="true">2</span>
          <h3>Direct project reads</h3>
          <p>Saved files are queried with Curio’s read-only project transport.</p>
        </div>
        <div>
          <span class="boundary-mark" aria-hidden="true">3</span>
          <h3>No Curio mutations</h3>
          <p>The dashboard cannot complete, move, tag, or save Curio figures.</p>
        </div>
      </div>
    </section>
  </div>
{% endblock %}