{% import "components/ui/v1.html" as ui_v1 %}
{% import "components/user.html" as user with context %}
{% 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(_('课程包排序'), _('调整课程包在当前域中的展示顺序。')) }}
  <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-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 cpdocs.length %}<button type="button" class="rounded button nojs--hide" data-course-package-reset>{{ _('撤销更改') }}</button>{% endif %}
          <a class="rounded button" href="{{ url('course_package_main') }}">{{ _('返回') }}</a>
        </div>
      </header>
      <div class="ui-panel__body">
        {% if not cpdocs.length %}
          {{ ui_v1.empty_state(_('暂无课程包')) }}
        {% else %}
        <ol class="ui-sortable-list" data-course-package-sort-list>
          {% for cpdoc in cpdocs %}
          <li class="ui-sortable-list__item{% if cpdoc.hidden %} course-package-ui__hidden-card{% endif %}" data-course-package-sort-item data-course-package-sort-scope="flat" data-course-package-sort-id="{{ cpdoc.docId }}" data-course-package-sort-title="{{ cpdoc.title }}">
            {{ ui_v1.sortable_handle(_('拖动以排序') ~ ': ' ~ cpdoc.title, 'course-package-sort-help', cpdocs.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">{{ cpdoc.title }}</h3>
                {% if cpdoc.hidden %}{{ ui_v1.badge(_('已隐藏'), tone='warning') }}{% endif %}
              </div>
              <div class="ui-cluster ui-cluster--xs ui-muted">
                <span>{{ cpdoc.nVersion|default(0) }} {{ _('版本') }}</span>
                {% if udict[cpdoc.owner] %}<span>{{ user.render_inline(udict[cpdoc.owner], badge=false) }}</span>{% endif %}
              </div>
            </div>
            <div class="ui-sortable-list__actions">
              {{ ui_v1.sortable_action(_('置顶'), _('置顶') ~ ': ' ~ cpdoc.title, action='top', disabled=loop.first, button_type='submit', name='move', value=cpdoc.docId ~ ':top') }}
              {{ ui_v1.sortable_action(_('上移'), _('上移') ~ ': ' ~ cpdoc.title, action='up', disabled=loop.first, button_type='submit', name='move', value=cpdoc.docId ~ ':up') }}
              {{ ui_v1.sortable_action(_('下移'), _('下移') ~ ': ' ~ cpdoc.title, action='down', disabled=loop.last, button_type='submit', name='move', value=cpdoc.docId ~ ':down') }}
              {{ ui_v1.sortable_action(_('置底'), _('置底') ~ ': ' ~ cpdoc.title, action='bottom', disabled=loop.last, button_type='submit', name='move', value=cpdoc.docId ~ ':bottom') }}
            </div>
          </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="{%- for cpdoc in cpdocs -%}{{ cpdoc.docId }}{% if not loop.last %},{% endif %}{%- endfor -%}" data-course-package-order>
  </form>
</main>
{% endblock %}