{% import "components/ui/v1.html" as ui_v1 %}
{% extends "layout/basic.html" %}
{% block content %}

<div class="class-team-hub-page ui-page ui-page--compact-type ui-split">
  <div class="ui-stack ui-stack--lg">
    <div class="section ui-panel">
      <div class="ui-panel__header">
        <div class="ui-cluster ui-cluster--between">
          <h1 class="ui-panel__title">{{ _('班级小队') }} <span data-ui-help-anchor="domain-class-teams-help-0"></span></h1>
          <span data-ui-help="使用说明" data-ui-help-for="domain-class-teams-help-0" class="ui-muted">{{ _('建议每队 2-3 人，可被比赛互动设置一键套用。') }}</span>
        </div>
      </div>
      <div class="ui-panel__body">
        {% for msg in messages %}
          <blockquote class="note">{{ msg }}</blockquote>
        {% endfor %}
        <form method="post" class="ui-stack">
          <input type="hidden" name="csrfToken" value="{{ handler.csrfToken }}">
          <div class="ui-grid ui-grid--2">
            <label class="ui-field">
              {{ _('小队名') }}
              <input class="textbox ui-field__control" name="name" placeholder="{{ _('例如：冲刺一队') }}">
            </label>
            <label class="ui-field">
              {{ _('备注') }}
              <input class="textbox ui-field__control" name="note" placeholder="{{ _('可写座位、层次、目标') }}">
            </label>
          </div>
          <label class="ui-field">
            {{ _('成员') }}
            <textarea class="textbox ui-field__control class-team-hub-page__members" name="membersText" placeholder="{{ _('填写 2-3 个 uid、用户名或邮箱，用空格/逗号分隔') }}"></textarea>
          </label>
          <div class="ui-actions ui-actions--start">
            <button class="button rounded primary" name="operation" value="save" type="submit">
              <span class="icon icon-add" aria-hidden="true"></span> {{ _('创建小队') }}
            </button>
          </div>
        </form>
      </div>
    </div>

    <div class="section ui-panel">
      <div class="ui-panel__header">
        <h1 class="ui-panel__title">{{ _('已有小队') }}</h1>
      </div>
      <div class="ui-panel__body ui-grid ui-grid--2">
        {% for team in teams %}
        <div class="ui-card">
          <form method="post" class="ui-card__body ui-stack">
            <input type="hidden" name="csrfToken" value="{{ handler.csrfToken }}">
            <input type="hidden" name="teamId" value="{{ team.teamId }}">
            <h2 class="ui-card__title">{{ team.name }}</h2>
            <div class="ui-cluster ui-cluster--xs">
              {% for name in team.memberNames %}
                <span class="ui-badge ui-badge--neutral">{{ name }}</span>
              {% endfor %}
            </div>
            <label class="ui-field">
              {{ _('小队名') }}
              <input class="textbox ui-field__control" name="name" value="{{ team.name }}">
            </label>
            <label class="ui-field">
              {{ _('成员') }}
              <textarea class="textbox ui-field__control class-team-hub-page__members" name="membersText">{{ team.membersText }}</textarea>
            </label>
            <label class="ui-field">
              {{ _('备注') }}
              <input class="textbox ui-field__control" name="note" value="{{ team.note }}">
            </label>
            <div class="ui-actions ui-actions--start">
              <button class="button rounded primary" name="operation" value="save" type="submit">{{ _('保存') }}</button>
              <button class="button rounded class-team-hub-page__danger" name="operation" value="delete" type="submit" onclick="return confirm('{{ _('确认删除这个班级小队？') }}')">{{ _('删除') }}</button>
            </div>
          </form>
        </div>
        {% endfor %}
        {% if not teams.length %}
          <p class="ui-muted">{{ _('还没有班级小队。') }}</p>
        {% endif %}
      </div>
    </div>
  </div>
  <div class="ui-sidebar ui-sidebar--flow">
    <div class="section ui-panel">
      <div class="ui-panel__header">
        <h1 class="ui-panel__title">{{ _('托管学生') }}</h1>
      </div>
      <div class="ui-panel__body typo">
        {% if students.length %}
        <ul class="class-team-hub-page__student-list ui-stack ui-stack--sm">
          {% for student in students %}
          <li><code>{{ student.uid }}</code> {{ student.name or student.uname }}{% if student.studentId %}<br><span class="ui-muted">{{ student.studentId }}</span>{% endif %}</li>
          {% endfor %}
        </ul>
        {% else %}
        <p class="ui-muted">{{ _('暂无托管学生，也可以直接填写 uid / 用户名。') }}</p>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock %}