{{define "ember_forum_index"}}
<div class="ember-page">
  <!-- 篝火横幅 -->
  <section class="ember-hero">
    <div class="ember-hero-fire" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></div>
    <p class="ember-hero-eyebrow">{{ico "fire"}} NIGHT TALK · 围炉夜谈</p>
    <h1>夜色正好，聊到尽兴</h1>
    <p class="ember-hero-sub">共 {{.Data.Total}} 条回声 · {{len .Data.Sections}} 个火堆版块 · 说得越认真，回声越响</p>
  </section>

  <!-- 发帖区：登录后添一根柴 -->
  {{if .Data.Sections}}
  <section class="ember-zone">
    <h2 class="ember-zone-title">{{ico "chat"}} 添一根柴，开个话题</h2>
    {{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}}
      <div class="echo-post-grid">
        <aside class="echo-post-side">
          <p class="echo-post-who">以 <b>{{.Data.CurrentUser}}</b> 的身份发布</p>
          <label class="echo-post-label" for="pubSection">发到版块</label>
          <select name="section_id" id="pubSection" required>
            <option value="">选择版块…</option>
            {{range .Data.Sections}}<option value="{{.ID}}">{{.Name}}</option>{{end}}
          </select>
          <span class="echo-post-label">帖子类型</span>
          <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>{{ico "chat"}} 文字</span></label>
            <label class="pt-type-tab"><input type="radio" name="type" value="poll" hidden><span>{{ico "check"}} 投票</span></label>
            <label class="pt-type-tab"><input type="radio" name="type" value="gallery" hidden><span>{{ico "image"}} 多图</span></label>
            <label class="pt-type-tab"><input type="radio" name="type" value="debate" hidden><span>{{ico "sliders"}} 辩论</span></label>
            <label class="pt-type-tab"><input type="radio" name="type" value="product" hidden><span>{{ico "bag"}} 商品</span></label>
            <label class="pt-type-tab"><input type="radio" name="type" value="longform" hidden><span>{{ico "file"}} 长文</span></label>
            <label class="pt-type-tab"><input type="radio" name="type" value="video" hidden><span>{{ico "camera"}} 视频</span></label>
          </div>
        </aside>

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

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

          <div data-pt-panel="longform" style="display:none">
            <textarea name="content" data-zx-editor data-upload="/forum/upload" 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="删除">{{ico "close"}}</button>
              </div>
              <div class="pt-opt-row">
                <input type="text" name="options" placeholder="选项 2" maxlength="40">
                <button type="button" class="pt-opt-del" title="删除">{{ico "close"}}</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">{{ico "camera"}} 选择图片<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" data-zx-editor 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" data-zx-editor placeholder="反方理由（可不填）" rows="2" maxlength="500"></textarea>
              </div>
            </div>
            <textarea name="content" data-zx-editor data-upload="/forum/upload" 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">{{ico "spark"}} 标题不填也能发：文字帖自动取正文首句，其他类型有专属占位标题。</span>
            <button class="btn btn-primary" type="submit">发出声音</button>
          </div>
        </div>
      </div>
    </form>
    {{else}}
    <div class="echo-post-login">
      <span>登录后才能发帖，用你的真实身份说点什么。</span>
      <a class="btn btn-primary btn-sm" href="/admin/login">去登录</a>
    </div>
    {{end}}
  </section>
  {{end}}

  <!-- 围炉热榜：最热 5 帖 -->
  <section class="ember-zone">
    <h2 class="ember-zone-title">{{ico "fire"}} 今晚最热的话题</h2>
    {{if .Data.Hot}}
    <ol class="ember-hot">
      {{range .Data.Hot}}
      <li>
        <a href="/forum/thread/{{.ID}}">
          <span class="ember-hot-flame ember-hot-flame-{{.Status}}"></span>
          <span class="ember-hot-title">{{.Title}}</span>
        </a>
        <em>{{.EchoIndex}}</em>
      </li>
      {{end}}
    </ol>
    {{else}}
    <div class="ember-empty">榜单空着，等第一声回响。</div>
    {{end}}
  </section>

  <!-- 回声流：帖子列表 -->
  <section class="ember-zone" id="echo-all">
    <h2 class="ember-zone-title">{{ico "radio"}} 正在回响 <span class="ember-note">按回声指数排座次</span></h2>
    {{range .Data.Threads}}
    <article class="ember-thread">
      <div class="ember-thread-score">
        <b>{{.EchoIndex}}</b>
        <span>回声</span>
        <i class="ember-meter"><s style="--lv:{{.EchoIndex}}"></s></i>
      </div>
      <div class="ember-thread-body">
        <h3 class="ember-thread-title">
          {{if eq .Sticky 1}}<span class="ember-pin">置顶</span>{{end}}
          <a href="/forum/thread/{{.ID}}">{{.Title}}</a>
        </h3>
        <div class="ember-thread-meta">
          <span class="ember-badge ember-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"}}{{ico "check"}} 投票
            {{else if eq .Type "gallery"}}{{ico "image"}} 多图
            {{else if eq .Type "debate"}}{{ico "sliders"}} 辩论
            {{else if eq .Type "product"}}{{ico "bag"}} 商品
            {{else if eq .Type "longform"}}{{ico "file"}} 长文
            {{else if eq .Type "video"}}{{ico "camera"}} 视频
            {{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>
    </article>
    {{else}}
    <div class="ember-empty">
      <h3>火堆还空着</h3>
      <p>还没有人发帖，第一个话题由你来点。</p>
    </div>
    {{end}}
    {{template "pagination" .}}
  </section>

  <!-- 火堆地图：版块 -->
  <section class="ember-zone" id="ember-sections">
    <h2 class="ember-zone-title">{{ico "compass"}} 火堆 · 版块地图</h2>
    <div class="ember-fire-grid">
      {{range .Data.Sections}}
      <article class="ember-fire-card" id="sec-{{.Slug}}" style="--heat:{{.Heat}}">
        <span class="ember-fire-temp" aria-hidden="true"></span>
        <h3 class="ember-fire-name">{{.Name}}</h3>
        <p class="ember-fire-desc">{{.Description}}</p>
        <footer class="ember-fire-foot">
          <span>{{.ThreadCount}} 话题</span>
          <span class="ember-fire-mood">「{{.Mood}}」</span>
          {{template "follow_button" dict "VD" $ "Type" "section" "Key" (printf "%d" .ID) "Title" .Name "URL" "/forum" "Self" ""}}
        </footer>
      </article>
      {{else}}
      <div class="ember-empty" style="grid-column:1/-1;">
        <h3>还没有版块</h3>
        <p>管理员到后台建一个版块，论坛就有地方聊天了。</p>
      </div>
      {{end}}
    </div>
  </section>

  <!-- 夜谈常客 -->
  {{if .Data.Voices}}
  <section class="ember-zone">
    <h2 class="ember-zone-title">{{ico "users"}} 夜谈常客</h2>
    <ul class="ember-voices">
      {{range .Data.Voices}}
      <li>
        <span class="ember-voice-avatar">{{initial .Name}}</span>
        <span class="ember-voice-name">{{.Name}}</span>
        <em>{{.Count}} 次发声</em>
      </li>
      {{end}}
    </ul>
  </section>
  {{end}}

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