{% extends "layout/home_base.html" %}
{% import "components/ui/v1.html" as ui_v1 %}

{% block home_content %}
<div class="dfg-admin ui-stack">
  {% call ui_v1.page_header('域分组') %}
    <a class="rounded button" href="{{ url('home_domain') }}">返回我的域</a>
  {% endcall %}
  {% if saved == 'reset' %}
    {{ ui_v1.alert('分组已清空，“我的域”将恢复原列表显示。', tone='success') }}
  {% elif saved %}
    {{ ui_v1.alert('分组配置已保存。返回“我的域”即可看到折叠分组。', tone='success') }}
  {% endif %}
  {% if parseError %}{{ ui_v1.alert(parseError, tone='danger') }}{% endif %}

  {% call ui_v1.panel(body_class='section__body') %}
    <form method="post" class="ui-stack">
      <input type="hidden" name="csrfToken" value="{{ handler.csrfToken }}">
      <input type="hidden" name="domainCount" value="{{ rows|length }}">
      <div class="ui-actions">
        {{ ui_v1.help('给每个域填写一级和二级分类；一级留空则不分组，自动放到“未分组”。这只是显示折叠，不会创建真实文件夹。') }}
        <button class="rounded primary button" type="submit" name="groupAction" value="save">保存</button>
      </div>

      {% if rows|length %}
      <div class="ui-table-wrap dfg-admin__scroll" tabindex="0" role="region" aria-label="域分组配置">
        <table class="data-table dfg-admin__table">
          <colgroup>
            <col class="dfg-admin__domain-column">
            <col>
            <col>
            <col class="dfg-admin__action-column">
          </colgroup>
          <thead><tr>
            <th scope="col">域</th>
            <th scope="col">一级折叠</th>
            <th scope="col">二级折叠</th>
            <th scope="col">操作</th>
          </tr></thead>
          <tbody>
            {% for row in rows %}
            <tr>
              <td>
                <input type="hidden" name="domain_{{ loop.index0 }}" value="{{ row.id }}">
                <div class="ui-text-wrap">
                  <div>{{ row.name or row.id }}</div>
                  {{ ui_v1.badge(row.id) }}
                  {% if row.missing %}{{ ui_v1.badge('不在当前列表', tone='warning') }}{% endif %}
                </div>
              </td>
              <td><input class="textbox dfg-admin__input" type="text" name="group_{{ loop.index0 }}" value="{{ row.group }}" list="dfg-group-options" aria-label="{{ row.name or row.id }}：一级折叠" placeholder="如：课程开发"></td>
              <td><input class="textbox dfg-admin__input" type="text" name="child_{{ loop.index0 }}" value="{{ row.child }}" list="dfg-child-options" aria-label="{{ row.name or row.id }}：二级折叠" placeholder="如：课程分区"></td>
              <td><button class="rounded button dfg-clear-row" type="button" aria-label="清空 {{ row.name or row.id }} 的分组" title="清空本行">清空</button></td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% else %}
        {{ ui_v1.empty_state('当前账号没有可分组的域。') }}
      {% endif %}

      <datalist id="dfg-group-options">
        {% for title in groupTitles %}<option value="{{ title }}">{% endfor %}
      </datalist>
      <datalist id="dfg-child-options">
        {% for title in childTitles %}<option value="{{ title }}">{% endfor %}
      </datalist>
      <details class="ui-card">
        <summary>批量补充</summary>
        <label class="ui-field dfg-admin__batch">
          <span class="ui-field__label">批量规则</span>
          <textarea class="textbox ui-field__control" name="extraRules" placeholder="课程开发 / 课程分区: JC01, K2026&#10;课程开发 / 比赛分区: bs001, cs001"></textarea>
        </label>
      </details>
      <div class="ui-actions ui-actions--start">
        <button class="rounded primary button" type="submit" name="groupAction" value="save">保存分组</button>
        <button class="rounded button" type="submit" name="groupAction" value="reset">清空全部</button>
      </div>
    </form>
  {% endcall %}
</div>
{% endblock %}