{{define "qa_index"}}
  <link rel="stylesheet" href="/static/css/qa.css?v={{assetVer}}">
<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">{{ico "compass"}} 先选方向，再上路</span>
    </div>
    <div class="qa-hero-sign" aria-hidden="true">
      <span class="sig-cn">前方分岔</span>
      <span class="sig-en">FORK AHEAD</span>
    </div>
    <h1 class="qa-hero-title">走哪条路，你说了算</h1>
    <ul class="qa-hero-signs">
      <li class="qs-left"><span class="qs-arrow" aria-hidden="true">←</span><b>经验</b><em>走过的人，讲怎么走</em></li>
      <li class="qs-left"><span class="qs-arrow" aria-hidden="true">←</span><b>方法</b><em>给步骤，不给口号</em></li>
      <li class="qs-right"><span class="qs-arrow" aria-hidden="true">→</span><b>数据</b><em>拿事实说话</em></li>
      <li class="qs-right"><span class="qs-arrow" aria-hidden="true">→</span><b>推荐</b><em>选哪条更好，讲清理由</em></li>
    </ul>
  </header>

  <!-- 提问区：登录后前台提问（不再单独填标题，正文首句即标题） -->
  {{if .Data.Err}}<div class="qa-post-err">{{.Data.Err}}</div>{{end}}
  <div class="qa-post qa-ask">
    <h3 class="qa-post-title">{{ico "help"}} 有困惑？问一条</h3>
    {{if .Data.CurrentUser}}
    <form method="post" action="/qa/ask">
      <!-- 方向胶囊：一行单选，方向取自问题表里实际出现过的 help_tag -->
      <div class="qa-chip-row" role="radiogroup" aria-label="选择求助方向">
        {{range $i, $t := .Data.Tags}}
        <label class="qa-chip">
          <input type="radio" name="help_tag" value="{{$t.Name}}" {{if eq $i 0}}checked{{end}}>
          <span class="qa-chip-text" title="{{$t.Name}}">{{$t.Name}}</span>
        </label>
        {{end}}
      </div>
      <textarea class="qa-ask-input" name="content" data-zx-editor data-upload="/blog/upload" rows="6" maxlength="5000" required
        placeholder="写清楚你在做什么、卡在哪里、试过什么，越具体越容易等到回答（支持 Markdown）"></textarea>
      <div class="qa-post-foot qa-ask-foot">
        <span class="qa-post-hint">以 <b>{{.Data.CurrentUser}}</b> 的身份提问，写下的第一句话会当作标题。</span>
        <button class="btn btn-primary qa-ask-btn" 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">{{ico "right"}}</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">{{ico "right"}}</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>
        <a class="qa-more" href="/qa/{{.ID}}">去回答 →</a>
      </div>
    </article>
    {{else}}
    <div class="mod-empty">
      <h3>这条路还没人问过</h3>
      <p>第一个问题由你来提。</p>
    </div>
    {{end}}
  </div>

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