app/templates/admin_groups.html

{% extends 'base.html' %}

{% block content %}
  <section class="page-grid admin-page-grid">
    <article class="glass-card form-panel">
      <div class="section-head">
        <div>
          <p class="eyebrow">Create Group</p>
          <h3>新建小组</h3>
        </div>
      </div>
      <form method="post" action="/admin/groups" class="form-stack">
        <div class="form-grid cols-2">
          <label>
            <span>小组名称</span>
            <input type="text" name="name" placeholder="留空自动生成第N组" />
          </label>
          <label>
            <span>人数上限</span>
            <input type="number" name="max_members" min="1" value="6" required />
          </label>
        </div>
        <button class="btn btn-primary" type="submit">创建小组</button>
      </form>
      <div class="info-box">
        <strong>未分组成员</strong>
        <div class="chip-row">
          {% for user in ungrouped_users %}
            <span class="chip">{{ user.full_name }} · {{ user.student_id }}</span>
          {% else %}
            <span class="chip">所有成员都已分组</span>
          {% endfor %}
        </div>
      </div>
    </article>

    <section class="card-grid group-grid">
      {% for group in groups %}
        <article class="glass-card group-card">
          <div class="card-topline">
            <span class="eyebrow">Group {{ loop.index }}</span>
            <span class="status-badge">{{ group.members|length }}/{{ group.max_members }}</span>
          </div>
          <h3>{{ group.name }}</h3>
          <div class="member-list">
            {% for member in group.members %}
              <div class="member-row">
                <strong>{{ member.full_name }}</strong>
                <span>{{ member.student_id }}</span>
              </div>
            {% else %}
              <p class="muted">该小组暂时还没有成员。</p>
            {% endfor %}
          </div>
          <form method="post" action="/admin/groups/{{ group.id }}/capacity" class="inline-form inline-form-wide">
            <label>
              <span>调整人数上限</span>
              <input type="number" name="max_members" min="1" value="{{ group.max_members }}" required />
            </label>
            <button class="btn btn-secondary small-btn" type="submit">更新</button>
          </form>
        </article>
      {% else %}
        <article class="empty-state">
          <h3>还没有小组</h3>
          <p>创建后这里会以卡片方式展示每个小组和成员。</p>
        </article>
      {% endfor %}
    </section>
  </section>
{% endblock %}