{% import "components/user.html" as user with context %}
{% import "components/paginator.html" as paginator with context %}
{% import "components/ui/v1.html" as ui_v1 %}
{% extends "layout/basic.html" %}
{% block content %}
<main class="course-package-ui ui-page ui-page--padded ui-page--compact-type ui-stack ui-stack--lg">
  {% if canManage %}
  {% call ui_v1.page_header(_('课程包'), _('浏览和管理可复用、可版本化的课程内容。')) %}
    <div class="ui-actions ui-print-hidden">
      <a href="{{ url('course_package_create') }}" class="rounded primary button"><span class="icon icon-add" aria-hidden="true"></span>{{ _('创建课程包') }}</a>
    </div>
  {% endcall %}
  {% else %}
  {{ ui_v1.page_header(_('课程包'), _('浏览和管理可复用、可版本化的课程内容。')) }}
  {% endif %}
  <div class="ui-split">
    <section class="ui-panel">
      <header class="ui-panel__header ui-toolbar ui-toolbar--flush ui-print-hidden">
        <div class="ui-toolbar__group">
          <h2 class="ui-panel__title">{{ _('课程包列表') }}</h2>
        </div>
        <div class="ui-toolbar__group">
          <form method="get" class="ui-actions">
            <label class="ui-field">
              <span class="ui-field__label">{{ _('搜索课程包') }}</span>
              <input type="text" class="inline compact textbox ui-field__control" name="q" value="{{ q }}" placeholder="{{ _('搜索课程包...') }}">
            </label>
            <button type="submit" class="button hasjs--hide">{{ _('Search') }}</button>
          </form>
        </div>
      </header>
      <div class="ui-panel__body">
        {% if not cpdocs.length %}
        {{ ui_v1.empty_state(_('暂无课程包')) }}
        {% else %}
        <ol class="ui-item-list">
          {% for cpdoc in cpdocs %}
          <li class="ui-item-list__item">
            <div class="ui-item-list__content ui-stack ui-stack--xs">
              <h3 class="ui-item-list__title">
                <a href="{{ url('course_package_detail', cpid=cpdoc.docId) }}">{{ cpdoc.title }}</a>
                {% if cpdoc.hidden %}{{ ui_v1.badge(_('已隐藏'), 'warning') }}{% endif %}
              </h3>
              {% set packageSummary = cpdoc.content|default('')|markdown|striptags|trim %}
              {% if packageSummary %}<div class="ui-item-list__description">{{ packageSummary|truncate(100, true)|safe }}</div>{% endif %}
              <div class="ui-meta">
                {% if udict[cpdoc.owner] %}<span>{{ user.render_inline(udict[cpdoc.owner], badge=false) }}</span>{% endif %}
                {% if cpdoc.updateAt %}<span>{{ _('Last Update At') }}: {{ datetimeSpan(cpdoc.updateAt)|safe }}</span>{% endif %}
              </div>
              {% if cpdoc.tags and cpdoc.tags.length %}
              <div class="ui-cluster ui-cluster--xs">
                {% for tag in cpdoc.tags %}{{ ui_v1.badge(tag, 'neutral') }}{% endfor %}
              </div>
              {% endif %}
            </div>
            <div class="ui-item-list__aside">
              {{ ui_v1.badge((cpdoc.nVersion|default(0)) ~ ' ' ~ _('版本'), 'neutral') }}
              {% if canManage %}
              <form method="post" class="ui-print-hidden">
                <input type="hidden" name="csrfToken" value="{{ handler.csrfToken }}">
                <input type="hidden" name="operation" value="toggle_hidden">
                <input type="hidden" name="cpid" value="{{ cpdoc.docId }}">
                <button type="submit" class="rounded button">
                  <span class="icon icon-{{ 'check' if cpdoc.hidden else 'security' }}" aria-hidden="true"></span>
                  {{ _('显示') if cpdoc.hidden else _('隐藏') }}
                </button>
              </form>
              {% endif %}
            </div>
          </li>
          {% endfor %}
        </ol>
        {% if page and cpcount %}
        <div class="ui-mt-md">{{ paginator.render(page, cpcount) }}</div>
        {% endif %}
        {% endif %}
      </div>
    </section>
    {% if canManage %}
    <aside class="ui-sidebar ui-print-hidden">
      <section class="ui-panel">
        <header class="ui-panel__header"><h2 class="ui-panel__title">{{ _('课程包管理') }}</h2></header>
        <div class="ui-panel__body">
          <nav aria-label="{{ _('课程包管理') }}">
            <ol class="ui-nav-list">
              <li class="ui-nav-list__item"><a href="{{ url('course_package_import') }}" class="ui-nav-list__link"><span class="icon icon-upload" aria-hidden="true"></span><span>{{ _('导入课程包') }}</span></a></li>
              <li class="ui-nav-list__item"><a href="{{ url('course_package_order') }}" class="ui-nav-list__link"><span class="icon icon-sliders" aria-hidden="true"></span><span>{{ _('调整课程包顺序') }}</span></a></li>
            </ol>
          </nav>
        </div>
      </section>
    </aside>
    {% endif %}
  </div>
</main>
{% endblock %}