{{define "camp_circles_detail"}}
<div class="camp-page">
  <div class="mod-back"><a href="/circles">← 返回星图</a></div>
  <div class="camp-planet-head">
    <div class="camp-planet-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="camp-planet-banner-char">{{.Data.Circle.CoverChar}}</span>{{end}}
      <span class="camp-planet-heat">热力 {{.Data.Circle.Heat}}</span>
    </div>
    <div class="camp-planet-titlebar">
      <div class="camp-planet-tags">
        <span class="camp-planet-mood" title="{{.Data.Circle.MoodDesc}}">{{.Data.Circle.Mood}}圈味</span>
        <span class="camp-planet-tag">{{.Data.Circle.MoodDesc}}</span>
      </div>
      <h1 class="camp-planet-name">
        {{if .Data.Circle.HasAvatar}}<img class="camp-planet-avatar" src="{{.Data.Circle.Avatar}}" alt="{{.Data.Circle.Name}} 的头像">{{else}}<span class="camp-planet-avatar is-char">{{.Data.Circle.CoverChar}}</span>{{end}}
        <span>{{.Data.Circle.Name}}</span>
      </h1>
      <p class="camp-planet-intro">{{.Data.Circle.Intro}}</p>
    </div>
  </div>

  <div class="camp-layout">
    <!-- 左栏：信号流 -->
    <div class="camp-stream">
      <h2 class="camp-stream-title">
        星球信号 <span class="camp-title-note">{{.Data.Circle.PostCount}} 条 · 新信号排在最后，但每一条都会被看见</span>
      </h2>

      {{if .Data.CurrentUser}}
      <form class="camp-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="camp-post-fields">
          <span class="camp-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>{{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>

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

        <div data-pt-panel="text">
          <textarea name="content" data-zx-editor data-upload="/circles/upload" placeholder="在这颗星球上留下你的信号… 分享、提问、报到，都行（支持 Markdown）" rows="4" maxlength="2000" required></textarea>
        </div>

        <div data-pt-panel="longform" style="display:none">
          <textarea name="content" data-zx-editor data-upload="/circles/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="/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" 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="/circles/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="camp-post-foot">
          <span class="camp-post-hint">{{ico "spark"}} 标题不填也能发：文字帖自动取正文首句，其他类型有专属占位标题。</span>
          <button class="btn btn-primary" type="submit">发送信号</button>
        </div>
      </form>
      {{else}}
      <div class="camp-post-login">
        <span>登录后才能留言。</span>
        <a class="btn btn-primary btn-sm" href="/admin/login">去登录</a>
      </div>
      {{end}}

      {{range .Data.Posts}}
      <article class="camp-post">
        <div class="camp-post-head">
          <span class="camp-post-avatar">{{printf "%.1s" .Author}}</span>
          <span class="camp-post-author">{{.Author}}</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}}
          <a class="camp-post-time" href="{{.URL}}" title="这条留言的详情页">{{dateTime .CreatedAt}}</a>
        </div>
        {{if .HasTitle}}<h3 class="camp-post-title"><a href="{{.URL}}">{{.Title}}</a></h3>{{end}}
        {{if .Folded}}
        <a class="camp-post-folded" href="{{.URL}}">
          <span class="camp-post-folded-tag">{{if eq .Type "longform"}}{{ico "file"}} 长文 · 全文在详情页{{else}}长留言 · 全文在详情页{{end}}</span>
          <span class="camp-post-folded-text">{{.Excerpt}}</span>
          <span class="camp-post-folded-more">查看详情 →</span>
        </a>
        {{else}}
        <div class="camp-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="camp-side">
      <div class="camp-panel">
        <h3 class="camp-panel-title">星球公约</h3>
        <div class="camp-rule">{{.Data.Circle.Rule}}</div>
        <p class="camp-rule-foot">公约刻在明处、人人可见——不是一个人说了算，是大家一起守的星律。</p>
      </div>

      <div class="camp-panel">
        <h3 class="camp-panel-title">星球居民</h3>
        <ul class="camp-stats">
          <li><span class="camp-stat-ico">{{ico "users"}}</span><span>{{.Data.Circle.Members}} 位居民</span></li>
          <li><span class="camp-stat-ico">{{ico "fire"}}</span><span>{{.Data.Circle.PostCount}} 条信号</span></li>
          <li><span class="camp-stat-ico">{{ico "calendar"}}</span><span>建于 {{date .Data.Circle.CreatedAt}}</span></li>
          <li><span class="camp-stat-ico">{{ico "chart"}}</span><span>热力 {{.Data.Circle.Heat}}</span></li>
        </ul>
      </div>

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