{{define "admin_circles"}}
  <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;">
    <div>
      <p style="margin:0;color:var(--muted);font-size:13px;">
        晴空部落后台：建部落、写公约、定圈味、管上架——把每一座部落都养得有人气。
      </p>
    </div>
    <div style="display:flex;gap:10px;">
      <a href="/circles" class="btn btn-ghost btn-sm" target="_blank" rel="noopener">查看部落广场</a>
      <a href="/admin/circles/new" class="btn btn-primary btn-sm">+ 新建部落</a>
    </div>
  </div>

  <div class="panel" style="padding:0;">
    <h2 style="padding:16px 20px 0;">部落列表（{{len .Data.Circles}}）<span style="font-weight:400;color:var(--muted);font-size:12.5px;">按部落热力排序 = 成员数 + 帖子数</span></h2>
    {{if .Data.Circles}}
    <div class="table-wrap">
    <table class="table">
      <thead>
        <tr>
          <th>部落</th>
          <th>圈味</th>
          <th>公约</th>
          <th>族人</th>
          <th>帖子</th>
          <th>热力</th>
          <th>状态</th>
          <th>时间</th>
          <th class="th-ops">操作</th>
        </tr>
      </thead>
      <tbody>
        {{range .Data.Circles}}
        <tr>
          <td>
            <span class="tribe-mini-flag" style="background:{{.CoverCSS}}">{{.CoverChar}}</span>
            <a href="/admin/circles/{{.ID}}/edit">{{.Name}}</a>
            <div class="cell-sub">{{.Slug}}</div>
          </td>
          <td><span class="tribe-mood tribe-mood-{{.MoodClass}}">{{.Mood}}</span></td>
          <td style="max-width:260px;">
            <div class="tribe-rule-cell">{{if .Rule}}{{truncate .Rule 46}}{{else}}<span style="color:var(--muted)">未写公约</span>{{end}}</div>
          </td>
          <td>{{.Members}}</td>
          <td>{{.PostCount}}</td>
          <td><b>{{.Heat}}</b></td>
          <td>{{if eq .Published 1}}<span class="badge badge-pub">上架</span>{{else}}<span class="badge badge-draft">下架</span>{{end}}</td>
          <td>{{date .CreatedAt}}</td>
          <td class="th-ops">
            <div class="row-actions">
              <a href="/circles/{{.Slug}}" class="btn btn-ghost btn-sm" target="_blank" rel="noopener">查看</a>
              <a href="/admin/circles/{{.ID}}/edit" class="btn btn-ghost btn-sm">编辑</a>
              <form method="post" action="/admin/circles/{{.ID}}/toggle" style="display:inline;">
                <input type="hidden" name="csrf" value="{{$.CSRF}}">
                <button class="btn btn-ghost btn-sm" type="submit">{{if eq .Published 1}}下架{{else}}上架{{end}}</button>
              </form>
              <form method="post" action="/admin/circles/{{.ID}}/delete" style="display:inline;"
                    onsubmit="return confirm('确定拆掉部落「{{.Name}}」吗？营地留言与公约会一并清空，此操作不可恢复。');">
                <input type="hidden" name="csrf" value="{{$.CSRF}}">
                <button class="btn btn-danger btn-sm" type="submit">删除</button>
              </form>
            </div>
          </td>
        </tr>
        {{end}}
      </tbody>
    </table>
    </div>
    {{else}}
    <div style="text-align:center;color:var(--muted);padding:40px 0;">暂无部落，点右上角「新建部落」立起第一面旗吧</div>
    {{end}}
  </div>
{{end}}