{{define "qa_index"}}
<div class="thm-qa">
  <!-- ===== 岔路口 hero：走哪条路，你说了算 ===== -->
  <header class="qa-hero">
    <div class="qa-hero-bg" aria-hidden="true">
      <svg class="qa-fork-bg" viewBox="0 0 1200 320" preserveAspectRatio="none">
        <!-- 主干道：求助的人从底部出发 -->
        <path class="rd rd-main" d="M604,322 C604,274 606,232 606,196" />
        <!-- 左岔路：经验 / 方法 -->
        <path class="rd rd-left1" d="M606,196 C606,158 560,126 496,104" />
        <path class="rd rd-left2" d="M606,196 C600,156 540,126 462,118" />
        <!-- 右岔路：数据 / 推荐 -->
        <path class="rd rd-right1" d="M606,196 C606,158 654,126 718,104" />
        <path class="rd rd-right2" d="M606,196 C612,156 672,126 750,118" />
        <!-- 分叉点路桩 -->
        <rect class="qa-fork-post" x="601" y="150" width="10" height="52" rx="5" />
        <circle class="qa-fork-cap" cx="606" cy="142" r="9" />
      </svg>
      <span class="qa-hero-note">🧭 先选方向，再上路</span>
    </div>
    <div class="qa-hero-sign" aria-hidden="true">
      <span class="sig-cn">前方分岔</span>
      <span class="sig-en">FORK AHEAD</span>
    </div>
    <span class="qa-kicker">🛣 晴空问路 · 只问正路，不问八卦</span>
    <h1 class="qa-hero-title">走哪条路，<br>你说了算</h1>
    <p class="qa-hero-sub">
      困惑来了不用急——先把自己<strong>摆在正确的路口</strong>：经验、方法、数据、推荐，四条路各归其位。
      谁的回答被采纳，谁就陪你走到站。<b>不编故事，不刷赞</b>，这里只有认真指路的人。
    </p>
    <div class="qa-hero-feet">
      <span>🛣 岔路口 · 四个方向</span>
      <span>✔ 采纳即到站</span>
      <span>🚫 不编故事 · 不刷赞</span>
    </div>
  </header>

  <!-- 提问区：登录后前台提问 -->
  {{if .Data.Err}}<div class="qa-post-err">{{.Data.Err}}</div>{{end}}
  <div class="qa-post">
    <h3 class="qa-post-title">🙋 有困惑？问一条</h3>
    {{if .Data.CurrentUser}}
    <form method="post" action="/qa/ask">
      <div class="qa-post-row">
        <select name="help_tag" required>
          <option value="">选方向…</option>
          {{range .Data.Tags}}<option value="{{.Name}}">{{.Name}}</option>{{end}}
        </select>
        <input type="text" name="title" placeholder="一句话说清你的问题（标题）" maxlength="80" required>
      </div>
      <textarea name="content" placeholder="把情况讲清楚：背景、卡点、试过什么——说得越细，越有人帮得上（支持 Markdown）" rows="4" maxlength="5000" required></textarea>
      <div class="qa-post-foot">
        <span class="qa-post-hint">💡 以 <b>{{.Data.CurrentUser}}</b> 的身份提问。</span>
        <button class="btn btn-primary" type="submit">把问题摆上桌</button>
      </div>
    </form>
    {{else}}
    <div class="qa-post-login">
      <span>登录后才能提问。</span>
      <a class="btn btn-primary btn-sm" href="/admin/login">去登录</a>
    </div>
    {{end}}
  </div>

  <!-- ===== 方向路牌：经验 / 方法 / 数据 / 推荐 ===== -->
  <div class="qa-tabs">
    <a href="/qa" class="qa-tab {{if eq .Data.Tag ""}}on{{end}}"><span class="qa-tab-arrow" aria-hidden="true">➤</span>全部</a>
    {{range .Data.Tags}}
    <a href="/qa?help_tag={{.Name}}" class="qa-tab {{if eq $.Data.Tag .Name}}on{{end}}">
      <span class="qa-tab-arrow" aria-hidden="true">➤</span>{{.Name}}<em>{{.Count}}</em>
    </a>
    {{end}}
  </div>

  <!-- ===== 路标卡：每条问题一块路牌 ===== -->
  <div class="qa-list">
    {{range .Data.Questions}}
    <article class="qa-card" data-dir="{{.HelpTag}}">
      <div class="qa-card-top">
        <span class="qa-tag">{{.HelpTag}}</span>
        {{if eq .Resolved 1}}<span class="qa-badge qa-badge-done">已解决</span>{{else}}<span class="qa-badge qa-badge-open">求助中</span>{{end}}
        <span class="qa-time">{{date .CreatedAt}}</span>
      </div>
      <h2 class="qa-title"><a href="/qa/{{.ID}}">{{.Title}}</a></h2>
      <p class="qa-summary">{{truncate .Content 120}}</p>
      <div class="qa-foot">
        <span class="qa-author">提问 · {{.Author}}</span>
        <span class="qa-views">{{.Views}} 次阅读</span>
        <span class="qa-answers-count">{{.AnswerCount}} 条回答</span>
        <span class="qa-more">去回答 →</span>
      </div>
    </article>
    {{else}}
    <div class="mod-empty">
      <h3>这条路还没人问过</h3>
      <p>第一个问题由你来提。</p>
    </div>
    {{end}}
  </div>

  {{template "pagination" .}}
  {{template "module_meta" .}}
</div>
{{end}}