{{define "camp_circles_index"}}
<div class="camp-page">
  <!-- 星空 Hero -->
  <header class="camp-hero">
    <div class="camp-hero-orbit" aria-hidden="true"><i></i><i></i><i></i><span class="camp-hero-planet"></span></div>
    <p class="camp-hero-eyebrow">{{ico "compass"}} GALAXY · 星球漫游</p>
    <h1 class="camp-hero-title">每一座圈子，都是一颗星球</h1>
    <p class="camp-hero-sub">挑一颗顺眼的星球降落，在它的大气层里找到同类。</p>
    <ul class="camp-hero-flags">
      <li><b>{{len .Data.Circles}}</b> 颗星球</li>
      <li><b>公约</b> 刻在星表</li>
      <li><b>新人谷</b> 先落脚</li>
      <li><b>热力</b> 决定轨道亮度</li>
    </ul>
  </header>

  <!-- 星球网格 -->
  <div class="camp-grid">
    {{range .Data.Circles}}
    <article class="camp-planet">
      <a class="camp-planet-cover{{if .HasBanner}} has-img{{end}}" href="/circles/{{.Slug}}"
         style="{{if .HasBanner}}background-image:url('{{.Banner}}'){{else}}background:{{.CoverCSS}}{{end}}">
        {{if not .HasBanner}}<span class="camp-planet-char">{{.CoverChar}}</span>{{end}}
        <span class="camp-planet-ring" aria-hidden="true"></span>
        <span class="camp-planet-mood" title="{{.MoodDesc}}">{{.Mood}}</span>
        <span class="camp-planet-heat">热力 {{.Heat}}</span>
      </a>
      <div class="camp-planet-body">
        <h2 class="camp-planet-name">
          {{if .HasAvatar}}<img class="camp-planet-avatar" src="{{.Avatar}}" alt="{{.Name}} 的头像">{{else}}<span class="camp-planet-avatar is-char">{{.CoverChar}}</span>{{end}}
          <a href="/circles/{{.Slug}}">{{.Name}}</a>
        </h2>
        <p class="camp-planet-intro">{{.Intro}}</p>
        <div class="camp-planet-foot">
          <span class="camp-planet-stat">{{ico "users"}} {{.Members}} 位居民</span>
          <span class="camp-planet-stat">{{ico "fire"}} {{.PostCount}} 条信号</span>
          <a class="camp-planet-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>

  <!-- 星球法则 -->
  <section class="camp-tout">
    <h3 class="camp-tout-title">{{ico "compass"}} 三种星球法则</h3>
    <div class="camp-tout-grid">
      <div class="camp-tout-item">
        <h4>不搞一言堂</h4>
        <p>公约刻在明处，人人看得见、守得住。规矩不是某个人说了算，是大家一起立的。</p>
      </div>
      <div class="camp-tout-item">
        <h4>不让新人沉默</h4>
        <p>每颗星球都有新人谷，一进来就有报到信号等你，第一句话永远有人接。</p>
      </div>
      <div class="camp-tout-item">
        <h4>不让冷启动冷场</h4>
        <p>圈味标签把氛围写在脸上，星球热力把热闹的圈子顶上来，人还没到先闻到味儿。</p>
      </div>
    </div>
  </section>

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