{% extends 'base.html' %}

{% block content %}
  <section class="page-grid admin-page-grid users-admin-grid">
    <article class="glass-card form-panel">
      <div class="section-head">
        <div>
          <p class="eyebrow">Create User</p>
          <h3>手动录入用户</h3>
        </div>
      </div>
      <form method="post" action="/admin/users" class="form-stack">
        <div class="form-grid cols-2">
          <label>
            <span>学号</span>
            <input type="text" name="student_id" required />
          </label>
          <label>
            <span>姓名</span>
            <input type="text" name="full_name" required />
          </label>
          <label>
            <span>登录密码</span>
            <input type="text" name="password" required />
          </label>
          <label>
            <span>所属小组</span>
            <select name="group_id">
              <option value="">暂不分组</option>
              {% for group in groups %}
                <option value="{{ group.id }}">{{ group.name }}（{{ group.members|length }}/{{ group.max_members }}）</option>
              {% endfor %}
            </select>
          </label>
        </div>
        <button class="btn btn-primary" type="submit">保存用户</button>
      </form>
    </article>

    <article class="glass-card form-panel">
      <div class="section-head">
        <div>
          <p class="eyebrow">Batch Import</p>
          <h3>批量导入用户</h3>
        </div>
      </div>
      <form method="post" action="/admin/users/import" class="form-stack">
        <label>
          <span>每行一人，格式：姓名 学号</span>
          <textarea name="import_text" rows="8" placeholder="张三 20230001&#10;李四 20230002"></textarea>
        </label>
        <label>
          <span>导入后分配到小组</span>
          <select name="group_id">
            <option value="">暂不分组</option>
            {% for group in groups %}
              <option value="{{ group.id }}">{{ group.name }}（{{ group.members|length }}/{{ group.max_members }}）</option>
            {% endfor %}
          </select>
        </label>
        <p class="mini-note">默认密码为学号后六位，不足六位则使用完整学号。</p>
        <button class="btn btn-secondary" type="submit">开始导入</button>
      </form>
    </article>
  </section>

  <section class="glass-card table-panel">
    <div class="section-head">
      <div>
        <p class="eyebrow">Users</p>
        <h3>用户列表与批量操作</h3>
      </div>
    </div>

    <form id="bulk-users-form" method="post" action="/admin/users/bulk" class="bulk-toolbar">
      <label>
        <span>批量操作</span>
        <select name="bulk_action" required>
          <option value="assign_group">批量分组</option>
          <option value="delete">批量删除</option>
        </select>
      </label>
      <label>
        <span>目标小组</span>
        <select name="group_id">
          <option value="">未分组</option>
          {% for group in groups %}
            <option value="{{ group.id }}">{{ group.name }}</option>
          {% endfor %}
        </select>
      </label>
      <button class="btn btn-primary" type="submit">执行批量操作</button>
    </form>

    <div class="table-shell">
      <table class="data-table">
        <thead>
          <tr>
            <th>
              <input class="table-checkbox" type="checkbox" data-check-all />
            </th>
            <th>学号</th>
            <th>姓名</th>
            <th>当前小组</th>
            <th>调整小组</th>
          </tr>
        </thead>
        <tbody>
          {% for user_item in users %}
            <tr>
              <td>
                <input class="table-checkbox" type="checkbox" name="user_ids" value="{{ user_item.id }}" data-user-check form="bulk-users-form" />
              </td>
              <td>{{ user_item.student_id }}</td>
              <td>{{ user_item.full_name }}</td>
              <td>{{ user_item.group.name if user_item.group else '未分组' }}</td>
              <td>
                <form method="post" action="/admin/users/{{ user_item.id }}/group" class="inline-form table-inline-form">
                  <select name="group_id">
                    <option value="">未分组</option>
                    {% for group in groups %}
                      <option value="{{ group.id }}" {% if user_item.group_id == group.id %}selected{% endif %}>{{ group.name }}</option>
                    {% endfor %}
                  </select>
                  <button class="btn btn-secondary small-btn" type="submit">保存</button>
                </form>
              </td>
            </tr>
          {% else %}
            <tr>
              <td colspan="5">还没有用户，请先录入。</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </section>

  <script>
    (() => {
      const checkAll = document.querySelector('[data-check-all]');
      const checks = Array.from(document.querySelectorAll('[data-user-check]'));
      if (!checkAll || checks.length === 0) return;
      checkAll.addEventListener('change', () => {
        checks.forEach((checkbox) => {
          checkbox.checked = checkAll.checked;
        });
      });
    })();
  </script>
{% endblock %}