<div class="js-category-body clearfix">
  {% if categories is not empty %}
    {{ _self.showCategoryTree(categories, questionBank, users, false) }}
  {% else %}
    <tr><td colspan="20"><div class="empty">{{'my.teaching.question_bank.question_category.empty'|trans}}</div></td></tr>
  {% endif %}
</div>

{% macro showCategoryTree(categories, questionBank, users, isCollapseChildren) %}
  <div class="js-sortable-list">
    {% for category in categories %}
      {% set isParent = category.children|default(null) is not empty %}
      {% set isRoot = category.depth == 1 %}
      <div class="js-sortable-item {% if category.depth == 1 %}question-bank__underline{% endif %}">
        <ul class="clearfix pls{{ (isParent and isCollapseChildren) ? ' row-collapse' : ' row-expand' }}">
          <div class="vertical-middle col-md-5" style="padding-left: {{ 24 * (category.depth - 1 ) }}px; overflow: hidden">
            {% if isParent %}
              <a href="javascript:;" class="js-expand">
                <i class="gray-darker cd-icon js-toggle-show js-remove-icon {{ isCollapseChildren ? 'cd-icon-add' : 'cd-icon-remove' }}"></i>
              </a>
            {% else %}
              <i class="gray-darker cd-icon mll"></i>
            {% endif %}
            {{ category.name }}
          </div>
          <div class="td col-md-4 code vertical-middle">
            <div>{{ users[category.userId].nickname|default('--') }}</div>
            <span class="cd-text-sm cd-dark-minor">{{ category.updatedTime|date('Y-m-d H:i:s') }}</span>
          </div>
          <div class="td col-md-3 operation vertical-middle question-bank__right" style="overflow: unset;">
            {% if category.depth < 3 %}
              <a href="javascript:;" class="cd-btn color-info" 
              data-url="{{ path('question_bank_manage_question_category_batch_create', {id: questionBank.id, parentId: category.id}) }}" 
              data-toggle="modal" data-target="#modal">{{'admin.category_manage.create_sub_category_btn'|trans}}</a>
            {% endif %}
            <div class="btn-group">
              <a href="javascript:;" class="cd-btn color-info" data-url="{{ path('question_bank_manage_question_category_edit', {id: category.id}) }}" data-toggle="modal" data-target="#modal">
                {{'admin.category_manage.edit_btn'|trans}}
              </a>
              <a href="javascript:;" data-url="{{ path('question_bank_manage_question_category_delete', {id:category.id}) }}" data-count-url="{{ path('question_bank_manage_question_category_question_count', {id:category.id}) }}"
                class="cd-btn delete-btn color-info">{{'admin.operation_announcement.delete_btn'|trans}}
              </a>
            </div>
          </div>
        </ul>
        {% if isParent %}
          {{ _self.showCategoryTree(category.children, questionBank, users, isCollapseChildren) }}
        {% endif %}
      </div>
    {% endfor %}
  </div>
{% endmacro %}
