{{define "admin_circle_form"}}
  {{if .Data.Error}}<div class="alert alert-err">{{.Data.Error}}</div>{{end}}
  <form method="post" action="{{if eq .Data.Mode "create"}}/admin/circles/create{{else}}/admin/circles/{{.Data.Circle.ID}}/update{{end}}">
    <input type="hidden" name="csrf" value="{{.CSRF}}">
    <div class="panel">
      <h2>部落名片</h2>
      <div class="form-row">
        <label>部落名称</label>
        <input type="text" name="name" value="{{.Data.Circle.Name}}" required placeholder="例如：晴空茶馆">
      </div>
      <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;">
        <div class="form-row">
          <label>链接别名（Slug）</label>
          <input type="text" name="slug" value="{{.Data.Circle.Slug}}" placeholder="留空则根据名称自动生成">
        </div>
        <div class="form-row">
          <label>族人数量</label>
          <input type="number" name="members" value="{{.Data.Circle.Members}}" min="0">
        </div>
      </div>
      <div class="form-row">
        <label>部落简介</label>
        <textarea name="intro" class="small" placeholder="广场卡片上的一句话：这座部落聊什么、什么脾气">{{.Data.Circle.Intro}}</textarea>
      </div>
    </div>

    <div class="panel">
      <h2>部落旗帜 <span style="font-weight:400;color:var(--muted);font-size:12.5px;">头图用在大 banner，头像用在名字旁；都能上传、更换、裁切</span></h2>
      <div class="cm-grid">
        <div class="cm-field">
          <label>部落头图<span class="hint">建议 3:1 横图，展示在广场卡片与营地顶部</span></label>
          <div class="cm-preview cm-preview-banner" data-cm-preview="banner">
            {{if .Data.Circle.HasBanner}}<img src="{{.Data.Circle.Banner}}" alt="部落头图">{{else}}<span class="cm-empty">还没有头图<br>先用旗帜色兜底</span>{{end}}
          </div>
          <div class="cm-actions">
            <label class="btn btn-ghost btn-sm">选择图片<input type="file" accept="image/*" hidden
              data-cm-input="banner" data-cm-ratio="3" data-cm-out="1500" data-cm-title="裁切头图" data-cm-upload="/admin/circles/upload"></label>
            <button type="button" class="btn btn-ghost btn-sm" data-cm-clear="banner">移除</button>
          </div>
          <input type="hidden" name="banner" value="{{.Data.Circle.Banner}}" data-cm-value="banner">
        </div>

        <div class="cm-field">
          <label>部落头像<span class="hint">建议 1:1 方图，展示在部落名与营地留言里</span></label>
          <div class="cm-preview cm-preview-avatar" data-cm-preview="avatar">
            {{if .Data.Circle.HasAvatar}}<img src="{{.Data.Circle.Avatar}}" alt="部落头像">{{else}}<span class="cm-empty">还没有头像<br>先用部落首字</span>{{end}}
          </div>
          <div class="cm-actions">
            <label class="btn btn-ghost btn-sm">选择图片<input type="file" accept="image/*" hidden
              data-cm-input="avatar" data-cm-ratio="1" data-cm-out="600" data-cm-title="裁切头像" data-cm-upload="/admin/circles/upload"></label>
            <button type="button" class="btn btn-ghost btn-sm" data-cm-clear="avatar">移除</button>
          </div>
          <input type="hidden" name="avatar" value="{{.Data.Circle.Avatar}}" data-cm-value="avatar">
        </div>
      </div>
      <div class="form-row" style="margin-bottom:0;">
        <label>旗帜颜色（#hex）</label>
        <input type="text" name="cover" value="{{.Data.Circle.Cover}}" placeholder="例如：#e8590c，留空自动配色">
        <div class="hint">没有头图 / 头像时，用这个同色系渐变 + 部落首字兜底，不会出现空白方块</div>
      </div>
    </div>

    <div class="panel">
      <h2>部落公约 <span style="font-weight:400;color:var(--muted);font-size:12.5px;">公开规则，详情页常驻展示，管理员可随时改</span></h2>
      <div class="form-row">
        <label>公约内容</label>
        <textarea name="rule" class="editor" placeholder="# 公约标题&#10;&#10;1. 第一条规矩&#10;2. 第二条规矩&#10;&#10;公约要写在明处——部落不搞组长一言堂，规矩是大家一起守的。">{{.Data.Circle.Rule}}</textarea>
      </div>
    </div>

    <div class="panel">
      <h2>圈味与上架</h2>
      <div class="form-row">
        <label>圈味标签</label>
        <select name="mood">
          <option value="热闹" {{if or (eq .Data.Circle.Mood "") (eq .Data.Circle.Mood "热闹")}}selected{{end}}>🔥 热闹 — 人声鼎沸，话题像篝火一样旺</option>
          <option value="安静" {{if eq .Data.Circle.Mood "安静"}}selected{{end}}>🌙 安静 — 低语者的部落，适合慢慢读、轻轻说</option>
          <option value="专业" {{if eq .Data.Circle.Mood "专业"}}selected{{end}}>🛠 专业 — 行家出没，干货优先，讲证据讲方法</option>
          <option value="松弛" {{if eq .Data.Circle.Mood "松弛"}}selected{{end}}>🍵 松弛 — 怎么舒服怎么来，摸鱼唠嗑松弛感拉满</option>
          <option value="脑洞" {{if eq .Data.Circle.Mood "脑洞"}}selected{{end}}>💡 脑洞 — 奇思妙想聚集地，脑洞有多大营地就有多大</option>
        </select>
        <div class="hint">圈味会以 chip 标签展示在广场卡片与营地详情上，让族人进门前先闻到味儿</div>
      </div>
      <div class="form-row" style="margin:0;">
        <label class="check-line">
          <input type="checkbox" name="published" value="1" {{if eq .Data.Circle.Published 1}}checked{{end}}>
          立即上架（部落广场可见）
        </label>
      </div>
    </div>

    <div style="display:flex;gap:10px;">
      <button class="btn btn-primary" type="submit">{{if eq .Data.Mode "create"}}立旗建部{{else}}保存修改{{end}}</button>
      <a class="btn btn-ghost" href="/admin/circles">取消</a>
    </div>
  </form>

  {{/* 裁切台：舞台即取景框——框里看到的就是最终成图，拖动移位、滑杆或滚轮缩放 */}}
  <div class="cm-crop-mask" id="cmCropMask" hidden>
    <div class="cm-crop-dialog">
      <div class="cm-crop-head">
        <strong id="cmCropTitle">裁切图片</strong>
        <span class="cm-crop-ratio" id="cmCropRatio">3 : 1</span>
        <button type="button" class="cm-crop-close" id="cmCropClose" aria-label="关闭">{{ico "close"}}</button>
      </div>
      <div class="cm-crop-stage" id="cmCropStage">
        <img id="cmCropImg" alt="待裁切的图片">
        <div class="cm-crop-grid" aria-hidden="true"></div>
      </div>
      <div class="cm-crop-tools">
        <span>缩放</span>
        <input type="range" id="cmCropZoom" min="100" max="400" value="100" step="1" aria-label="缩放">
        <span>拖动图片调整位置，虚线框内就是成图</span>
      </div>
      <p class="cm-crop-err" id="cmCropErr" hidden></p>
      <div class="cm-crop-acts">
        <button type="button" class="btn btn-ghost btn-sm" id="cmCropReset">复位</button>
        <span class="spacer"></span>
        <button type="button" class="btn btn-ghost" id="cmCropCancel">取消</button>
        <button type="button" class="btn btn-primary" id="cmCropOk">确定并上传</button>
      </div>
    </div>
  </div>
{{end}}