<section class="view settings-view" data-view="settings">
  <header class="shell-topbar">
    <div class="shell-topbar-content">
      <p class="shell-brand">Nebula OS</p>
      <div class="shell-status">
        <span class="shell-avatar" aria-hidden="true"></span>
        <p class="shell-time" data-clock>--:--</p>
      </div>
    </div>
    <div class="shell-accent-line"></div>
  </header>

  <section class="settings-header-copy">
    <p class="muted">System</p>
    <h1 class="view-title">Settings</h1>
  </section>

  <section class="settings-body" data-focus-root>
    <section class="settings-category-bar">
      <button class="focusable settings-category" data-focusable="true" data-row="0" data-col="0" data-cat="network">Network</button>
      <button class="focusable settings-category" data-focusable="true" data-row="0" data-col="1" data-cat="audio">Audio</button>
      <button class="focusable settings-category" data-focusable="true" data-row="0" data-col="2" data-cat="display">Display</button>
      <button class="focusable settings-category" data-focusable="true" data-row="0" data-col="3" data-cat="storage">Storage</button>
      <button class="focusable settings-category" data-focusable="true" data-row="0" data-col="4" data-cat="system">System</button>
    </section>

    <article class="panel settings-panel">
      <div class="settings-panel-head">
        <h2 class="settings-panel-title" data-panel-title>Network</h2>
        <p class="muted" data-panel-copy>Optimize connection and online routing.</p>
      </div>
      <div class="settings-card-grid">
        <button class="focusable settings-card" data-focusable="true" data-row="1" data-col="0" data-toggle="primary">
          <p class="settings-card-title">Primary Switch</p>
          <p class="muted" data-primary-state>Enabled</p>
        </button>
        <button class="focusable settings-card" data-focusable="true" data-row="1" data-col="1" data-toggle="secondary">
          <p class="settings-card-title">Secondary Switch</p>
          <p class="muted" data-secondary-state>Enabled</p>
        </button>
        <div class="settings-card settings-card-info">
          <p class="settings-card-title">Status</p>
          <p class="muted" data-status-note>Applying Nebula profile</p>
        </div>
      </div>
    </article>
  </section>
</section>
