{{define "forum_index"}}
  <div class="thm-forum">
  <header class="echo-hero">
    <div class="echo-hero-bg" aria-hidden="true">
      <svg class="echo-wave-bg" viewBox="0 0 1200 260" preserveAspectRatio="none">
        <path class="w1" d="M0,170 C80,90 160,250 240,160 C320,70 400,250 480,150 C560,60 640,240 720,155 C800,80 880,230 960,150 C1040,90 1120,220 1200,140 L1200,260 L0,260 Z" />
        <path class="w2" d="M0,190 C100,120 200,260 300,170 C400,90 500,260 600,165 C700,90 800,250 900,170 C1000,100 1100,240 1200,160 L1200,260 L0,260 Z" />
        <path class="w3" d="M0,215 C120,170 240,250 360,190 C480,140 600,260 720,195 C840,140 960,255 1080,195 C1140,170 1200,210 1200,180 L1200,260 L0,260 Z" />
      </svg>
      <span class="echo-hero-note">♥ 声浪持续涌动中</span>
    </div>
    <span class="ph-kicker">💬 共鸣板 · 声音自己找同频</span>
    <h1 class="ph-title">把声音<br>调出来</h1>
    <p class="ph-note">
      这里不按时间流水账排队，也没有可以刷的票——<b>说得越认真，回声越响</b>。
      深度的讨论会浮上来，灌水的帖子自然沉底，吵起来的会被一眼看穿。
    </p>
    <div class="echo-stats">
      <div class="echo-stat"><b>{{.Data.Total}}</b><span>全部回声</span></div>
      <div class="echo-stat"><b>{{len .Data.Sections}}</b><span>个版块</span></div>
      <div class="echo-stat"><b>{{len .Data.Voices}}</b><span>位发声人</span></div>
    </div>
  </header>

  <!-- 发帖区：登录后前台一键开声 -->
  {{if .Data.Sections}}
  <div class="echo-post">
    <h3 class="echo-post-title">🎙 开一帖，说点什么</h3>
    {{if .Data.Err}}<div class="echo-post-err">{{.Data.Err}}</div>{{end}}
    {{if .Data.CurrentUser}}
    <form method="post" action="/forum/post" data-post-form>
      {{if $.CSRF}}<input type="hidden" name="csrf" value="{{$.CSRF}}">{{end}}
      <p class="echo-post-who">以 <b>{{.Data.CurrentUser}}</b> 的身份发布</p>
      <div class="echo-post-row">
        <select name="section_id" required>
          <option value="">选择版块…</option>
          {{range .Data.Sections}}<option value="{{.ID}}">{{.Name}}</option>{{end}}
        </select>

        <!-- 帖子类型切换：与版块选择并排一行 -->
        <div class="pt-type-tabs" role="tablist" aria-label="帖子类型">
          <label class="pt-type-tab active"><input type="radio" name="type" value="text" checked hidden><span>💬 文字</span></label>
          <label class="pt-type-tab"><input type="radio" name="type" value="poll" hidden><span>🗳 投票</span></label>
          <label class="pt-type-tab"><input type="radio" name="type" value="gallery" hidden><span>🖼 多图</span></label>
          <label class="pt-type-tab"><input type="radio" name="type" value="debate" hidden><span>⚖ 辩论</span></label>
          <label class="pt-type-tab"><input type="radio" name="type" value="product" hidden><span>🛒 商品</span></label>
          <label class="pt-type-tab"><input type="radio" name="type" value="longform" hidden><span>📜 长文</span></label>
          <label class="pt-type-tab"><input type="radio" name="type" value="video" hidden><span>🎬 视频</span></label>
        </div>
      </div>

      <input type="text" name="title" placeholder="标题（可不填，留空自动取正文首句）" maxlength="80">

      <!-- 文字 -->
      <div data-pt-panel="text">
        <textarea name="content" placeholder="把话说完整一点——说得越认真，回声越响（支持 Markdown）" rows="4" maxlength="20000" required></textarea>
      </div>

      <!-- 长文：小说章节 / 深度长评 -->
      <div data-pt-panel="longform" style="display:none">
        <textarea name="content" placeholder="长文 · 小说章节、深度长评、完整故事：放心写，这里不嫌篇幅长（支持 Markdown）" rows="12" maxlength="50000"></textarea>
      </div>

      <!-- 投票 -->
      <div data-pt-panel="poll" style="display:none">
        <div class="pt-opt-rows" data-poll-rows>
          <div class="pt-opt-row">
            <input type="text" name="options" placeholder="选项 1" maxlength="40">
            <button type="button" class="pt-opt-del" title="删除">✕</button>
          </div>
          <div class="pt-opt-row">
            <input type="text" name="options" placeholder="选项 2" maxlength="40">
            <button type="button" class="pt-opt-del" title="删除">✕</button>
          </div>
        </div>
        <div class="pt-opt-tools">
          <button type="button" class="pt-opt-add" data-poll-add>＋ 加选项</button>
          <label class="pt-multi"><input type="checkbox" name="multiple" value="1"> 允许多人多选</label>
        </div>
      </div>

      <!-- 多图 -->
      <div data-pt-panel="gallery" style="display:none">
        <label class="pt-upload-btn">📷 选择图片<input type="file" accept="image/*" multiple data-gallery data-upload="/forum/upload" aria-label="选择要上传的图片"></label>
        <input type="hidden" name="images">
        <div class="pt-gal-pre" data-gallery-list></div>
        <p class="pt-gal-tip" data-gallery-tip>可一次多选，自动压缩后拼成画廊；第一张会成为封面。</p>
      </div>

      <!-- 辩论 -->
      <div data-pt-panel="debate" style="display:none">
        <div class="pt-debate-ed">
          <div class="pt-debate-ed-side pro">
            <span class="pt-debate-ed-tag">正 方</span>
            <input type="text" name="pro_title" placeholder="正方立场，如：手机就该买贵的" maxlength="40">
            <textarea name="pro_stmt" placeholder="正方理由（可不填）" rows="2" maxlength="500"></textarea>
          </div>
          <div class="pt-debate-ed-side con">
            <span class="pt-debate-ed-tag">反 方</span>
            <input type="text" name="con_title" placeholder="反方立场，如：够用就好" maxlength="40">
            <textarea name="con_stmt" placeholder="反方理由（可不填）" rows="2" maxlength="500"></textarea>
          </div>
        </div>
        <textarea name="content" placeholder="把这场辩论的引子写两句：为什么争、争什么（支持 Markdown）" rows="3" maxlength="20000"></textarea>
      </div>

      <!-- 商品 -->
      <div data-pt-panel="product" style="display:none">
        <input type="url" name="url" placeholder="粘贴购物链接：京东 / 淘宝 / 天猫 / 闲鱼 / 拼多多 / 美团 / 饿了么 / 唯品会…" maxlength="2000">
        <p class="pt-gal-tip">发布时自动抓取商品图、标题、价格，拼成信息完整的大卡片。</p>
      </div>

      <!-- 视频 -->
      <div data-pt-panel="video" style="display:none">
        <input type="url" name="url" placeholder="粘贴视频链接：B站 / 腾讯 / 优酷 / 抖音 / YouTube…" maxlength="2000">
        <p class="pt-gal-tip">可内嵌的平台直接在站内播放（左视频右评论 / 上视频下评论），其余显示跳转卡片。</p>
      </div>

      <div class="echo-post-foot">
        <span class="echo-post-hint">💡 标题不填也能发：文字帖自动取正文首句，其他类型有专属占位标题。</span>
        <button class="btn btn-primary" type="submit">发出声音</button>
      </div>
    </form>
    {{else}}
    <div class="echo-post-login">
      <span>登录后才能发帖，用你的真实身份说点什么。</span>
      <a class="btn btn-primary btn-sm" href="/admin/login">去登录</a>
    </div>
    {{end}}
  </div>
  {{end}}

  <div class="echo-layout">
    <!-- ===== 左栏：频道条（声场导航） ===== -->
    <aside class="echo-left">
      <div class="echo-panel echo-nav">
        <h3 class="echo-panel-title">频道</h3>
        <a class="echo-nav-item echo-nav-all" href="#echo-all">
          <span class="echo-knob">
            <span class="echo-dot echo-dot-hot" style="width:14px;height:14px"></span>
          </span>
          <span class="echo-nav-name">全部回声</span>
          <em>{{.Data.Total}}</em>
        </a>
        {{range .Data.Sections}}
        <a class="echo-nav-item" href="#sec-{{.Slug}}">
          <span class="echo-knob">
            {{if gt .Heat 20}}
            <span class="echo-dot echo-dot-hot" style="width:16px;height:16px" title="这个版块很热闹"></span>
            {{else if gt .Heat 5}}
            <span class="echo-dot echo-dot-mild" style="width:13px;height:13px" title="有人在这儿聊"></span>
            {{else}}
            <span class="echo-dot echo-dot-quiet" style="width:10px;height:10px" title="还比较安静"></span>
            {{end}}
          </span>
          <span class="echo-nav-name">{{.Name}}</span>
          <em>{{.ThreadCount}}</em>
        </a>
        {{end}}
      </div>
      <p class="echo-nav-tip">圆点越大，回声越密；颜色越红，这里正吵得热闹。</p>
    </aside>

    <!-- ===== 中栏：声浪列表（帖子按回声指数起伏） ===== -->
    <div class="echo-mid" id="echo-all">
      <div class="echo-panel echo-stage">
        <h3 class="echo-panel-title">正在回响 <span class="echo-title-note">波形越高，回声越响</span></h3>
        {{range .Data.Threads}}
        <article class="echo-card" style="--amp:{{.EchoIndex}}">
          <div class="echo-wave" aria-hidden="true">
            <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
          </div>
          <div class="echo-card-body">
            <h4 class="echo-card-title">
              {{if eq .Sticky 1}}<span class="echo-pin">置顶</span>{{end}}
              <a href="/forum/thread/{{.ID}}">{{.Title}}</a>
            </h4>
            <div class="echo-card-meta">
              <span class="echo-badge echo-badge-{{.Status}}">
                {{if eq .Status "hot"}}在聊{{else if eq .Status "fire"}}争议{{else}}沉底{{end}}
              </span>
              {{if ne .Type "text"}}
              <span class="pt-chip">
                {{if eq .Type "poll"}}🗳 投票
                {{else if eq .Type "gallery"}}🖼 多图
                {{else if eq .Type "debate"}}⚖ 辩论
                {{else if eq .Type "product"}}🛒 商品
                {{else if eq .Type "longform"}}📜 长文
                {{else if eq .Type "video"}}🎬 视频
                {{end}}
              </span>
              {{end}}
              <span>{{.SectionName}}</span>
              <span>{{.Author}}</span>
              <span>{{date .CreatedAt}}</span>
              <span>{{.ReplyCount}} 回声{{if gt .DeepReplies 0}} · {{.DeepReplies}} 深度{{end}}</span>
              <span>{{.Views}} 听</span>
            </div>
          </div>
          <div class="echo-card-score">
            <span class="echo-score-num">{{.EchoIndex}}</span>
            <span class="echo-score-label">回声指数</span>
            <span class="echo-meter" aria-hidden="true"><i style="--lv:{{.EchoIndex}}"></i></span>
          </div>
        </article>
        {{else}}
        <div class="empty" style="padding:40px 20px;">
          <h3>这里还很安静</h3>
          <p>还没有人发帖，第一个话题由你来开。</p>
        </div>
        {{end}}
        {{template "pagination" .}}
      </div>
    </div>

    <!-- ===== 右栏：回声榜 + 活跃发声人 ===== -->
    <aside class="echo-right">
      <div class="echo-panel">
        <h3 class="echo-panel-title">回声榜 <span class="echo-title-note">最热 5 帖</span></h3>
        {{if .Data.Hot}}
        <ol class="echo-top">
          {{range .Data.Hot}}
          <li>
            <a href="/forum/thread/{{.ID}}">
              <span class="echo-dot echo-dot-{{.Status}}" style="width:12px;height:12px"></span>
              <span class="echo-top-title">{{.Title}}</span>
            </a>
            <em>{{.EchoIndex}}</em>
          </li>
          {{end}}
        </ol>
        {{else}}
        <div class="echo-empty">榜单空着，等第一声回响。</div>
        {{end}}
      </div>

      <div class="echo-panel">
        <h3 class="echo-panel-title">活跃发声人</h3>
        {{if .Data.Voices}}
        <ul class="echo-voices">
          {{range .Data.Voices}}
          <li>
            <span class="echo-voice-avatar">{{printf "%.1s" .Name}}</span>
            <span class="echo-voice-name">{{.Name}}</span>
            <em>{{.Count}} 次发声</em>
          </li>
          {{end}}
        </ul>
        {{else}}
        <div class="echo-empty">还没有人发声，做第一个吧。</div>
        {{end}}
      </div>
    </aside>
  </div>

  <!-- ===== 频道音轨卡片墙（版块） ===== -->
  <div class="echo-sections" id="echo-sections">
    <h2 class="echo-wall-title">频道 · 音轨卡片墙</h2>
    <div class="echo-wall">
      {{range .Data.Sections}}
      <article class="echo-sec-card" id="sec-{{.Slug}}" style="--heat:{{.Heat}}">
        <div class="echo-sec-track" aria-hidden="true">
          <span class="echo-sec-freq"></span>
        </div>
        <div class="echo-sec-head">
          <span class="echo-sec-name">{{.Name}}</span>
          <span class="echo-sec-count">{{.ThreadCount}} 主题</span>
          {{template "follow_button" dict "VD" $ "Type" "section" "Key" (printf "%d" .ID) "Title" .Name "URL" "/forum" "Self" ""}}
        </div>
        <p class="echo-sec-desc">{{.Description}}</p>
        <p class="echo-sec-mood">「{{.Mood}}」</p>
      </article>
      {{else}}
      <div class="empty" style="grid-column:1/-1;padding:40px 20px;">
        <h3>还没有版块</h3>
        <p>管理员到后台建一个版块，论坛就有地方聊天了。</p>
      </div>
      {{end}}
    </div>
  </div>
  {{template "module_meta" .}}
  </div>
{{end}}