<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{ project_name }} - XS Content Viewer</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=LXGW+WenKai&family=ZCOOL+XiaoWei&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/static/styles.css">
</head>
<body>
  <div class="background-sheen"></div>
  <header class="topbar">
    <div class="brand">
      <span class="brand-mark">{{ project_name }}</span>
      <span class="brand-sub">XS Content Viewer</span>
    </div>
    <div class="top-actions">
      <div class="top-stats" id="top-stats">Loading...</div>
      <button class="ghost" id="refresh-index" type="button">Refresh</button>
    </div>
  </header>

  <div class="layout">
    <aside class="sidebar left">
      <section class="panel filter-panel">
        <div class="panel-title">Search & Filter</div>
        <label class="field-label" for="search-input">Full-text Search</label>
        <input id="search-input" class="text-input" type="search" placeholder="Keywords, characters, events...">

        <div class="field-row">
          <div class="field">
            <label class="field-label" for="chapter-min">Chapter Range</label>
            <div class="range-inputs">
              <input id="chapter-min" type="number" min="1" placeholder="From">
              <span>to</span>
              <input id="chapter-max" type="number" min="1" placeholder="To">
            </div>
          </div>
        </div>

        <div class="field">
          <div class="field-label">Content Scope</div>
          <div class="chip-group" id="section-filters"></div>
        </div>

        <div class="field">
          <div class="field-label">Characters</div>
          <div class="chip-group" id="character-filters"></div>
        </div>

        <div class="field">
          <div class="field-label">Events</div>
          <div class="chip-group" id="event-filters"></div>
        </div>

        <div class="button-row">
          <button class="ghost" id="clear-filters" type="button">Clear Filters</button>
        </div>
      </section>
    </aside>

    <main class="reader">
      <section class="reader-header">
        <div class="breadcrumbs" id="content-path">Select a chapter or resource</div>
        <h1 id="content-title">Welcome to {{ project_name }}</h1>
        <div class="summary" id="content-summary"></div>
        <div class="reader-actions">
          <button class="ghost" id="meta-toggle" type="button">Show Metadata</button>
          <button class="accent" id="mark-read" type="button" disabled>Mark as Read</button>
        </div>
      </section>

      <section class="meta-panel hidden" id="meta-panel"></section>

      <article class="content-body" id="content-body">
        <p class="placeholder">Use the left panel to search and filter. Progress and info are shown on the right.</p>
      </article>

      <div class="pager" id="pager">
        <button class="ghost" id="prev-chapter" type="button" disabled>Previous</button>
        <button class="ghost" id="next-chapter" type="button" disabled>Next</button>
      </div>
    </main>

    <aside class="sidebar right">
      <section class="panel results-panel hidden" id="results-panel">
        <div class="panel-title">Results <span id="match-count">0</span></div>
        <div class="results-list" id="results-list"></div>
      </section>

      <section class="panel nav-panel">
        <div class="panel-title">Chapter Navigation</div>
        <div id="nav-tree" class="nav-tree"></div>
      </section>
    </aside>
  </div>

  <script src="/static/app.js"></script>
</body>
</html>
