{{define "circles_detail"}}
  <div class="thm-circles">
  <div class="mod-back"><a href="/circles">← 返回部落广场</a></div>
  <div class="tribe-camp-head">
    <div class="tribe-camp-banner{{if .Data.Circle.HasBanner}} has-img{{end}}"
         style="{{if .Data.Circle.HasBanner}}background-image:url('{{.Data.Circle.Banner}}'){{else}}background:{{.Data.Circle.CoverCSS}}{{end}}">
      {{if not .Data.Circle.HasBanner}}<span class="tribe-banner-char">{{.Data.Circle.CoverChar}}</span>{{end}}
      <span class="tribe-heat-flag">热力 {{.Data.Circle.Heat}}</span>
    </div>
    <div class="tribe-camp-titlebar">
      <div class="tribe-camp-tags">
        <span class="tribe-mood tribe-mood-{{.Data.Circle.MoodClass}}" title="{{.Data.Circle.MoodDesc}}">{{.Data.Circle.Mood}}圈味</span>
        <span class="tribe-camp-tag">{{.Data.Circle.MoodDesc}}</span>
      </div>
      <h1 class="tribe-camp-name">
        {{if .Data.Circle.HasAvatar}}<img class="tribe-camp-avatar" src="{{.Data.Circle.Avatar}}" alt="{{.Data.Circle.Name}} 的头像">{{else}}<span class="tribe-camp-avatar is-char">{{.Data.Circle.CoverChar}}</span>{{end}}
        <span>{{.Data.Circle.Name}}</span>
      </h1>
      <p class="tribe-camp-intro">{{.Data.Circle.Intro}}</p>
    </div>
  </div>

  <div class="tribe-camp">
    <!-- 左栏：营地留言流（可发帖，需登录） -->
    <div class="tribe-stream">
      <h2 class="tribe-stream-title">
        营地留言 <span class="tribe-title-note">{{.Data.Circle.PostCount}} 条 · 新留言会排在最后，但每一条都会被看见</span>
      </h2>

      {{if .Data.CurrentUser}}
      <form class="tribe-post-form" method="post" action="/circles/{{.Data.Circle.Slug}}/post" data-post-form>
        {{if $.CSRF}}<input type="hidden" name="csrf" value="{{$.CSRF}}">{{end}}
        <div class="tribe-post-fields">
          <span class="tribe-post-who">以 <b>{{.Data.CurrentUser}}</b> 的身份留言</span>
          <input type="text" name="website" class="tribe-honeypot" tabindex="-1" autocomplete="off" aria-hidden="true">
        </div>

        <!-- 留言类型切换 -->
        <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>

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

        <!-- 文字 -->
        <div data-pt-panel="text">
          <textarea name="content" placeholder="在部落里说点什么… 分享、提问、报到，都行（支持 Markdown）" maxlength="2000" 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="/circles/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="tribe-post-foot">
          <span class="tribe-post-hint">💡 标题不填也能发：文字帖自动取正文首句，其他类型有专属占位标题。</span>
          <button class="btn btn-primary" type="submit">留 言</button>
        </div>
      </form>
      {{else}}
      <div class="tribe-post-login">
        <span>登录后才能留言。</span>
        <a class="btn btn-primary btn-sm" href="/admin/login">去登录</a>
      </div>
      {{end}}

      {{range .Data.Posts}}
      <article class="tribe-post">
        <div class="tribe-post-head">
          <span class="tribe-post-avatar">{{printf "%.1s" .Author}}</span>
          <span class="tribe-post-author">{{.Author}}</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}}
          <a class="tribe-post-time" href="{{.URL}}" title="这条留言的详情页">{{dateTime .CreatedAt}}</a>
        </div>
        {{if .HasTitle}}<h3 class="tribe-post-title"><a href="{{.URL}}">{{.Title}}</a></h3>{{end}}
        {{if .Folded}}
        {{/* 长文与超长留言在营地里只留一段摘要：营地是用来逛的，一次读五万字会把人劝退 */}}
        <a class="tribe-post-folded" href="{{.URL}}">
          <span class="tribe-post-folded-tag">{{if eq .Type "longform"}}📜 长文 · 全文在详情页{{else}}长留言 · 全文在详情页{{end}}</span>
          <span class="tribe-post-folded-text">{{.Excerpt}}</span>
          <span class="tribe-post-folded-more">查看详情 →</span>
        </a>
        {{else}}
        <div class="tribe-post-content">{{.Body}}</div>
        {{end}}
        {{if or (eq .Type "poll") (eq .Type "gallery") (eq .Type "product") (eq .Type "debate") (eq .Type "video")}}
        {{template "post_type_blocks" dict
          "Type" .Type
          "Config" .Config
          "Poll" .Poll
          "Debate" .Debate
          "PollURL" (printf "/circles/%s/post/%d/vote" $.Data.Circle.Slug .ID)
          "DebateURL" (printf "/circles/%s/post/%d/debate" $.Data.Circle.Slug .ID)
        }}
        {{end}}
      </article>
      {{else}}
      <div class="mod-empty" style="padding:36px 20px;">
        <h3>营地还空着</h3>
        <p>第一句话由你来写——部落里最不缺的，就是愿意接话的人。</p>
      </div>
      {{end}}
    </div>

    <!-- 右栏：部落公约 + 圈内成员 + 新人谷 -->
    <aside class="tribe-side">
      <div class="tribe-panel tribe-rule-panel">
        <h3 class="tribe-panel-title">部落公约</h3>
        <div class="tribe-rule">{{.Data.Circle.Rule}}</div>
        <p class="tribe-rule-foot">公约刻在明处、人人可见——不是组长一个人的一言堂，是大家一起守的家规。</p>
      </div>

      <div class="tribe-panel">
        <h3 class="tribe-panel-title">圈内成员</h3>
        <ul class="tribe-stats">
          <li><span class="tribe-stat-ico">👥</span><span>{{.Data.Circle.Members}} 位族人</span></li>
          <li><span class="tribe-stat-ico">🔥</span><span>{{.Data.Circle.PostCount}} 条留言</span></li>
          <li><span class="tribe-stat-ico">🗓</span><span>建于 {{date .Data.Circle.CreatedAt}}</span></li>
          <li><span class="tribe-stat-ico">⚑</span><span>热力 {{.Data.Circle.Heat}}</span></li>
        </ul>
      </div>

      <div class="tribe-panel tribe-valley">
        <h3 class="tribe-panel-title">新人谷</h3>
        <p>刚进部落？找上面那条「新人谷 · 报到处」留言报到，大家会来迎接你。</p>
        <p class="tribe-valley-note">不发言也没关系——先看看大家在聊什么，看顺眼了再开口。部落不催你。</p>
      </div>
    </aside>
  </div>
  </div>
{{end}}