{{define "circles_index"}}
  <div class="thm-circles">

  <!-- ===== 场景 hero：部落营地 / 篝火（暖橙玻璃 + 帐篷剪影 + 篝火光点） ===== -->
  <header class="camp-hero">
    <div class="camp-hero-bg" aria-hidden="true">
      <svg class="camp-silhouette" viewBox="0 0 1200 320" preserveAspectRatio="none">
        <!-- 远山 -->
        <path class="camp-hill camp-hill-1" d="M0,240 C120,182 260,232 400,192 C560,142 700,228 860,182 C1020,138 1140,208 1200,172 L1200,320 L0,320 Z"/>
        <path class="camp-hill camp-hill-2" d="M0,272 C160,218 300,268 470,228 C650,188 820,262 1000,222 C1100,198 1160,238 1200,218 L1200,320 L0,320 Z"/>
        <!-- 帐篷剪影 -->
        <g class="camp-tents">
          <path d="M170,320 L238,206 L306,320 Z"/>
          <path d="M276,320 L362,176 L448,320 Z"/>
          <path d="M756,320 L836,194 L916,320 Z"/>
          <path d="M904,320 L972,230 L1040,320 Z"/>
        </g>
        <!-- 篝火：火焰 + 火星 -->
        <g class="camp-fire">
          <path class="fire-core" d="M614,272 C596,252 604,236 614,220 C624,236 632,252 614,272 Z"/>
          <circle class="fire-ember e1" cx="588" cy="250" r="5"/>
          <circle class="fire-ember e2" cx="640" cy="242" r="4"/>
          <circle class="fire-ember e3" cx="614" cy="204" r="3.5"/>
          <circle class="fire-ember e4" cx="600" cy="226" r="2.5"/>
        </g>
      </svg>
      <span class="camp-hero-note">{{ico "fire"}} 篝火正旺 · 每座部落都在等新族人入营</span>
    </div>
    <h1 class="camp-title">入营，找到你的部落</h1>
    <ul class="camp-flags">
      <li><span class="cf-flag"></span><b>旗帜</b><em>立在外面 · 圈子封面</em></li>
      <li><span class="cf-flag"></span><b>公约</b><em>刻在营地 · 公开规则</em></li>
      <li><span class="cf-flag"></span><b>新人谷</b><em>新族人先落脚</em></li>
      <li><span class="cf-flag"></span><b>{{len .Data.Circles}} 座部落</b><em>篝火式热力榜</em></li>
    </ul>
  </header>

  <!-- ===== 部落营帐卡墙：帐篷顶 + 旗帜封面 + 圈味 chip + 热力旗标 ===== -->
  <div class="camp-grid">
    {{range .Data.Circles}}
    <article class="tribe-card">
      <a class="tribe-cover{{if .HasBanner}} has-img{{end}}" href="/circles/{{.Slug}}"
         style="{{if .HasBanner}}background-image:url('{{.Banner}}'){{else}}background:{{.CoverCSS}}{{end}}">
        <span class="tribe-pole" aria-hidden="true"></span>
        {{if not .HasBanner}}<span class="tribe-cover-char">{{.CoverChar}}</span>{{end}}
        <span class="tribe-mood tribe-mood-{{.MoodClass}}" title="{{.MoodDesc}}">{{.Mood}}</span>
        <span class="tribe-heat-flag">热力 {{.Heat}}</span>
      </a>
      <div class="tribe-card-body">
        <h2 class="tribe-card-name">
          {{if .HasAvatar}}<img class="tribe-name-avatar" src="{{.Avatar}}" alt="{{.Name}} 的头像">{{else}}<span class="tribe-name-avatar is-char">{{.CoverChar}}</span>{{end}}
          <a href="/circles/{{.Slug}}">{{.Name}}</a>
        </h2>
        <p class="tribe-card-intro">{{.Intro}}</p>
        <div class="tribe-card-foot">
          <span class="tribe-stat">{{ico "users"}} {{.Members}} 族人</span>
          <span class="tribe-stat">{{ico "fire"}} {{.PostCount}} 帖</span>
          <a class="tribe-enter" href="/circles/{{.Slug}}">进部落 →</a>
        </div>
      </div>
    </article>
    {{else}}
    <div class="mod-empty" style="grid-column:1/-1;padding:50px 20px;">
      <h3>广场上还没有部落</h3>
      <p>管理员到后台建一座部落，旗帜立起来，就有人来了。</p>
    </div>
    {{end}}
  </div>

  <!-- ===== 营地守则 · 新人谷（部落的三种不一样，融入篝火营地） ===== -->
  <div class="camp-tout">
    <h3 class="camp-tout-title">{{ico "compass"}} 部落的三种不一样</h3>
    <div class="camp-tout-grid">
      <div class="camp-tout-item">
        <h4 class="camp-tout-head">不搞组长一言堂</h4>
        <p class="camp-tout-desc">公约刻在明处，人人看得见、守得住。规矩不是某个人说了算，是大家一起立的。</p>
      </div>
      <div class="camp-tout-item">
        <h4 class="camp-tout-head">不让新人沉默</h4>
        <p class="camp-tout-desc">每座部落都有新人谷，一进来就有报到帖等你，第一句话永远有人接。</p>
      </div>
      <div class="camp-tout-item">
        <h4 class="camp-tout-head">不让冷启动冷场</h4>
        <p class="camp-tout-desc">圈味标签把氛围写在脸上，部落热力把热闹的部落顶上来，人还没到先闻到味儿。</p>
      </div>
    </div>
  </div>

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