{% import "components/ui/v1.html" as ui_v1 %}
{% extends "layout/basic.html" %}
{% block content %}
<main class="course-package-ui course-package-sort ui-page ui-page--padded ui-page--compact-type ui-stack ui-stack--lg">
  {{ ui_v1.page_header(_('结构排序') ~ ': ' ~ cpdoc.title ~ ' / ' ~ vpdoc.version, _('分别调整章的顺序，以及各章内部的节顺序。')) }}
  <form method="post" class="ui-stack" data-course-package-sort data-course-package-sort-announcement="{{ _('已将 {0} 移动到第 {1} 位。') }}">
    <section class="ui-panel">
      <header class="ui-panel__header ui-toolbar ui-toolbar--flush">
        <div>
          <h2 class="ui-panel__title">{{ _('章与节') }}</h2>
          <p id="course-package-structure-sort-help" class="ui-muted ui-print-hidden course-package-sort__help">
            <span class="nojs--hide">{{ _('拖动手柄或使用移动按钮调整顺序；聚焦手柄后可使用方向键、Home 或 End。节只能在所属章内排序。') }}</span>
            <span class="hasjs--hide">{{ _('使用移动按钮逐项调整顺序；节只能在所属章内排序。') }}</span>
          </p>
        </div>
        <div class="ui-toolbar__group ui-print-hidden">
          <button type="submit" class="rounded primary button">{{ _('保存排序') }}</button>
          {% if chapters.length %}<button type="button" class="rounded button nojs--hide" data-course-package-reset>{{ _('撤销更改') }}</button>{% endif %}
          <a class="rounded button" href="{{ url('course_package_version_detail', cpid=cpdoc.docId, vid=vpdoc.docId) }}">{{ _('返回') }}</a>
        </div>
      </header>
      <div class="ui-panel__body">
        {% if not chapters.length %}
          {{ ui_v1.empty_state(_('这个版本还没有章。')) }}
        {% else %}
        <ol class="ui-sortable-list" data-course-package-chapter-list>
          {% for chapter in chapters %}
          <li class="ui-sortable-list__item{% if chapter.hidden %} course-package-ui__hidden-card{% endif %}" data-course-package-chapter-item data-course-package-sort-scope="chapter" data-course-package-sort-id="{{ chapter.id }}" data-course-package-sort-title="{{ chapter.title }}">
            {{ ui_v1.sortable_handle(_('拖动章以排序') ~ ': ' ~ chapter.title, 'course-package-structure-sort-help', chapters.length > 1, 'nojs--hide') }}
            {{ ui_v1.sortable_index(loop.index) }}
            <div class="ui-sortable-list__content">
              <div class="ui-cluster ui-cluster--xs">
                <h3 class="course-package-sort__title">{{ chapter.title }}</h3>
                {% if chapter.hidden %}{{ ui_v1.badge(_('已隐藏'), tone='warning') }}{% endif %}
              </div>
              <div class="ui-cluster ui-cluster--xs ui-muted">
                <span>{{ chapter.lessons.length }} {{ _('节') }}</span>
              </div>
            </div>
            <div class="ui-sortable-list__actions">
              {{ ui_v1.sortable_action(_('置顶'), _('置顶章') ~ ': ' ~ chapter.title, action='top', disabled=loop.first, button_type='submit', name='move', value={scope:'chapter', id:chapter.id, action:'top'}|json) }}
              {{ ui_v1.sortable_action(_('上移'), _('上移章') ~ ': ' ~ chapter.title, action='up', disabled=loop.first, button_type='submit', name='move', value={scope:'chapter', id:chapter.id, action:'up'}|json) }}
              {{ ui_v1.sortable_action(_('下移'), _('下移章') ~ ': ' ~ chapter.title, action='down', disabled=loop.last, button_type='submit', name='move', value={scope:'chapter', id:chapter.id, action:'down'}|json) }}
              {{ ui_v1.sortable_action(_('置底'), _('置底章') ~ ': ' ~ chapter.title, action='bottom', disabled=loop.last, button_type='submit', name='move', value={scope:'chapter', id:chapter.id, action:'bottom'}|json) }}
            </div>
            {% if chapter.lessons.length %}
            <ol class="ui-sortable-list course-package-sort__children" aria-label="{{ _('节排序') }}: {{ chapter.title }}" data-course-package-lesson-list>
              {% for lesson in chapter.lessons %}
              <li class="ui-sortable-list__item{% if lesson.hidden %} course-package-ui__hidden-card{% endif %}" data-course-package-lesson-item data-course-package-sort-scope="lesson" data-course-package-sort-id="{{ lesson.id }}" data-course-package-sort-title="{{ lesson.title }}">
                {{ ui_v1.sortable_handle(_('拖动节以排序') ~ ': ' ~ lesson.title, 'course-package-structure-sort-help', chapter.lessons.length > 1, 'nojs--hide') }}
                {{ ui_v1.sortable_index(loop.index) }}
                <div class="ui-sortable-list__content">
                  <div class="ui-cluster ui-cluster--xs">
                    <h4 class="course-package-sort__title">{{ lesson.title }}</h4>
                    {% if lesson.hidden %}{{ ui_v1.badge(_('已隐藏'), tone='warning') }}{% endif %}
                  </div>
                  <div class="ui-cluster ui-cluster--xs ui-muted">
                    <span>{{ lesson.pids.length }} {{ _('题目') }}</span>
                  </div>
                </div>
                <div class="ui-sortable-list__actions">
                  {{ ui_v1.sortable_action(_('置顶'), _('置顶节') ~ ': ' ~ lesson.title, action='top', disabled=loop.first, button_type='submit', name='move', value={scope:'lesson', chapterId:chapter.id, id:lesson.id, action:'top'}|json) }}
                  {{ ui_v1.sortable_action(_('上移'), _('上移节') ~ ': ' ~ lesson.title, action='up', disabled=loop.first, button_type='submit', name='move', value={scope:'lesson', chapterId:chapter.id, id:lesson.id, action:'up'}|json) }}
                  {{ ui_v1.sortable_action(_('下移'), _('下移节') ~ ': ' ~ lesson.title, action='down', disabled=loop.last, button_type='submit', name='move', value={scope:'lesson', chapterId:chapter.id, id:lesson.id, action:'down'}|json) }}
                  {{ ui_v1.sortable_action(_('置底'), _('置底节') ~ ': ' ~ lesson.title, action='bottom', disabled=loop.last, button_type='submit', name='move', value={scope:'lesson', chapterId:chapter.id, id:lesson.id, action:'bottom'}|json) }}
                </div>
              </li>
              {% endfor %}
            </ol>
            {% else %}
            <div class="course-package-sort__children">
              {{ ui_v1.empty_state(_('本章还没有节。')) }}
            </div>
            {% endif %}
          </li>
          {% endfor %}
        </ol>
        <div class="ui-actions ui-actions--start ui-print-hidden course-package-sort__footer">
          <button type="submit" class="rounded primary button">{{ _('保存排序') }}</button>
          <button type="button" class="rounded button nojs--hide" data-course-package-reset>{{ _('撤销更改') }}</button>
        </div>
        {% endif %}
        <p class="ui-sortable-list__status" aria-live="polite" aria-atomic="true" data-course-package-sort-live></p>
      </div>
    </section>
    <input type="hidden" name="order" value="[]" data-course-package-order>
  </form>
</main>
{% endblock %}