<!DOCTYPE html>
<html lang="fa" dir="rtl" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>منبع — پرسش از کتاب انگلیسی</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='8' fill='%231ABB9C'/%3E%3Cpath d='M9 23V9h6.5a4 4 0 0 1 0 8H12' stroke='%23fff' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E">
<meta name="color-scheme" content="light dark">
<script>
  try { var t = localStorage.getItem('src-theme'); if (t) document.documentElement.dataset.theme = t; } catch (e) {}
</script>
<link rel="stylesheet" href="/assets/danisha-theme.css">
<link rel="stylesheet" href="/app.css">
</head>
<body>
<header class="app-bar">
  <div class="bar-in">
    <div class="brand">
      <span class="logo">م</span>
      <div class="brand-txt">
        <strong>منبع</strong>
        <span id="bookLine" class="muted">پرسش از کتاب انگلیسی</span>
      </div>
    </div>
    <nav class="tabs" id="tabs" role="tablist">
      <button class="tab active" data-view="ask" role="tab">پرسش</button>
      <button class="tab" data-view="shelf" role="tab">فصل‌ها</button>
      <button class="tab" data-view="map" role="tab">نقشهٔ مفاهیم</button>
    </nav>
    <div class="bar-end">
      <button class="icon-btn" id="themeBtn" title="تغییر پوسته" aria-label="تغییر پوسته">◑</button>
      <div class="who" id="who"></div>
    </div>
  </div>
</header>

<main class="wrap">

  <!-- ---------------------------------------------------------------- ask -->
  <section id="view-ask" class="view active">
    <div class="composer card">
      <label class="lbl" for="q">پرسش خود را به فارسی بنویسید؛ پاسخ با ارجاع به همان صفحهٔ کتاب داده می‌شود.</label>
      <textarea id="q" class="composer-input" rows="3"
        placeholder="مثلاً: تفاوت RAG و fine-tuning چیست و کتاب کدام را برای چه کاری پیشنهاد می‌کند؟"></textarea>
      <div class="composer-bar">
        <button class="btn btn-primary" id="send">بپرس</button>
        <button class="btn" id="clear">پاک کردن</button>
        <span class="hint" id="hint">Ctrl + Enter برای ارسال · پاسخ‌ها بر پایهٔ متن خود کتاب‌اند</span>
      </div>
      <div class="examples" id="examples"></div>
    </div>

    <div id="status" class="status" hidden><span class="spinner"></span><span id="statusText"></span></div>

    <article id="answerCard" class="card answer" hidden>
      <div class="answer-head">
        <span class="badge" id="modeBadge"></span>
        <span class="muted" id="metaLine"></span>
      </div>
      <div id="answerBody" class="answer-body"></div>
      <div id="notes" class="notes"></div>
    </article>

    <section id="sourcesWrap" hidden>
      <h2 class="sec-title">متن کتاب <span class="muted" id="srcCount"></span></h2>
      <div id="sources" class="sources"></div>
    </section>
  </section>

  <!-- -------------------------------------------------------------- shelf -->
  <section id="view-shelf" class="view">
    <div class="card">
      <h2 class="sec-title" id="shelfTitle">فصل‌ها</h2>
      <p class="muted small">هر فصل را باز کنید تا متن انگلیسی را بخوانید؛ ارجاع‌های پاسخ‌ها به همین فصل‌ها اشاره می‌کنند.</p>
      <div id="chapterList" class="chapter-list"></div>
    </div>
  </section>

  <!-- ---------------------------------------------------------------- map -->
  <section id="view-map" class="view">
    <div class="card">
      <h2 class="sec-title">نقشهٔ مفاهیم</h2>
      <p class="muted small">مفاهیم از عنوان‌های خود کتاب استخراج شده‌اند. اندازهٔ هر گره تعداد ارجاع‌های کتاب به آن مفهوم است؛ رنگ، فصل خانهٔ آن را نشان می‌دهد.</p>
      <div id="mapBox" class="map-box"><svg id="mapSvg"></svg></div>
      <div id="mapLegend" class="legend"></div>
    </div>
  </section>

  <!-- ------------------------------------------------------------- reader -->
  <section id="view-reader" class="view">
    <div class="reader-bar">
      <button class="btn" id="backToAsk">بازگشت</button>
      <div class="reader-title" id="readerTitle"></div>
      <button class="btn" id="readerAsk">پرسش از این فصل</button>
    </div>
    <div class="card reader-card">
      <div id="readerBody" class="reader-body" dir="ltr"></div>
    </div>
  </section>

  <div id="login" class="login" hidden>
    <div class="card login-card">
      <h2>ورود با حساب دانیشا</h2>
      <p class="muted">این سرویس خصوصی است و پرسش‌ها به حساب شما ثبت می‌شوند.</p>
      <a class="btn btn-primary" href="/auth/start">ورود</a>
    </div>
  </div>
</main>

<footer class="foot">
  <span id="footBook"></span>
  <span class="muted">·</span>
  <span class="muted">پاسخ‌ها فقط از متن همین کتاب ساخته می‌شوند؛ اگر کتاب جواب نداشته باشد، صریح می‌گوید.</span>
</footer>

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