{% import "components/user.html" as user 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">
  {% call ui_v1.page_header(cpdoc.title, _('查看课程包说明和全部版本。')) %}
    <div class="ui-actions">
      {% if cpdoc.hidden %}{{ ui_v1.badge(_('已隐藏'), 'warning') }}{% endif %}
      <a class="rounded button ui-print-hidden" href="{{ url('course_package_main') }}">{{ _('返回课程包') }}</a>
      {% if canManage %}<a class="rounded primary button ui-print-hidden" href="{{ url('course_package_version_create', cpid=cpdoc.docId) }}"><span class="icon icon-add" aria-hidden="true"></span>{{ _('创建版本') }}</a>{% endif %}
    </div>
  {% endcall %}
  <div class="ui-split">
    <div class="ui-stack ui-stack--lg">
      <section class="ui-panel">
        <header class="ui-panel__header"><h2 class="ui-panel__title">{{ _('Description') }}</h2></header>
        <div class="ui-panel__body typo richmedia">
          {{ cpdoc.content|default('')|markdown|safe }}
        </div>
      </section>
      <section class="ui-panel">
        <header class="ui-panel__header"><h2 class="ui-panel__title">{{ _('版本') }}</h2></header>
        <div class="ui-panel__body">
          {% if not versions.length %}
          {{ ui_v1.empty_state(_('暂无版本')) }}
          {% else %}
          <ol class="ui-item-list">
            {% for vpdoc in versions %}
            <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_version_detail', cpid=cpdoc.docId, vid=vpdoc.docId) }}">{{ vpdoc.title }}</a>
                  {% if vpdoc.hidden %}{{ ui_v1.badge(_('已隐藏'), 'warning') }}{% endif %}
                </h3>
                <div class="ui-meta">
                  <span>{{ vpdoc.summary.chapterCount }} {{ _('章') }}</span>
                  <span>{{ vpdoc.summary.lessonCount }} {{ _('节') }}</span>
                  <span>{{ vpdoc.summary.problemCount }} {{ _('题目') }}</span>
                  {% if vpdoc.updateAt %}<span>{{ _('Last Update At') }}: {{ datetimeSpan(vpdoc.updateAt)|safe }}</span>{% endif %}
                </div>
              </div>
              <div class="ui-item-list__aside">
                {{ ui_v1.badge(vpdoc.version, '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_version_hidden">
                  <input type="hidden" name="vid" value="{{ vpdoc.docId }}">
                  <button type="submit" class="rounded button">
                    <span class="icon icon-{{ 'check' if vpdoc.hidden else 'security' }}" aria-hidden="true"></span>
                    {{ _('显示') if vpdoc.hidden else _('隐藏') }}
                  </button>
                </form>
                {% endif %}
              </div>
            </li>
            {% endfor %}
          </ol>
          {% endif %}
        </div>
      </section>
    </div>
    <aside class="ui-sidebar">
      <section class="ui-panel">
        <header class="ui-panel__header"><h2 class="ui-panel__title">{{ _('课程包信息') }}</h2></header>
        <div class="ui-panel__body">
          <div class="ui-meta">
            <span>{{ _('Created By') }}: {{ user.render_inline(udoc, badge=false) }}</span>
            <span>{{ _('版本') }}: {{ versions.length }}</span>
          </div>
        </div>
      </section>
      {% if canManage %}
      <section class="ui-panel ui-print-hidden">
        <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 class="ui-nav-list__link" href="{{ url('course_package_edit', cpid=cpdoc.docId) }}"><span class="icon icon-edit" aria-hidden="true"></span><span>{{ _('Edit') }}</span></a></li>
              <li class="ui-nav-list__item">
                <form method="post" class="ui-nav-list__form">
                  <input type="hidden" name="csrfToken" value="{{ handler.csrfToken }}">
                  <input type="hidden" name="operation" value="toggle_hidden">
                  <button type="submit" class="ui-nav-list__link">
                    <span class="icon icon-{{ 'check' if cpdoc.hidden else 'security' }}" aria-hidden="true"></span>
                    <span>{{ _('显示课程包') if cpdoc.hidden else _('隐藏课程包') }}</span>
                  </button>
                </form>
              </li>
              <li class="ui-nav-list__item"><a class="ui-nav-list__link" href="{{ url('course_package_version_order', cpid=cpdoc.docId) }}"><span class="icon icon-sliders" aria-hidden="true"></span><span>{{ _('调整版本顺序') }}</span></a></li>
            </ol>
          </nav>
        </div>
      </section>
      {% endif %}
    </aside>
  </div>
</main>
{% endblock %}