{% 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(lesson.title, chapter.title ~ ' · ' ~ vpdoc.version) %}
    {% if lesson.hidden %}{{ ui_v1.badge(_('已隐藏'), 'warning') }}{% endif %}
    <a class="rounded button ui-print-hidden" href="{{ url('course_package_chapter_preview', cpid=cpdoc.docId, vid=vpdoc.docId, chapterId=chapter.id) }}">{{ _('返回章节预览') }}</a>
    {% if canManage %}<a class="rounded primary button ui-print-hidden" href="{{ url('course_package_lesson_edit', cpid=cpdoc.docId, vid=vpdoc.docId, chapterId=chapter.id, lessonId=lesson.id) }}">{{ _('编辑节') }}</a>{% endif %}
    {% if canCopy %}
    <a class="rounded button ui-print-hidden" href="{{ url('course_package_copy', cpid=cpdoc.docId, vid=vpdoc.docId, query={mode:'lesson', nodeId:lesson.id}) }}">{{ _('复制') }}</a>
    <a class="rounded button ui-print-hidden" href="{{ url('course_package_lesson_contest', cpid=cpdoc.docId, vid=vpdoc.docId, chapterId=chapter.id, lessonId=lesson.id) }}">{{ _('建比赛') }}</a>
    {% endif %}
  {% endcall %}
  {% if lesson.content %}
  <article class="ui-panel ui-panel--continuous">
    <header class="ui-panel__header"><h2 class="ui-panel__title">{{ _('小节内容') }}</h2></header>
    <div class="ui-panel__body typo richmedia ui-prose">{{ lesson.content|markdown|safe }}</div>
  </article>
  {% endif %}
  {% if lectures.length %}
  <section class="ui-panel ui-panel--continuous" aria-labelledby="course-package-lectures-title">
    <header class="ui-panel__header"><h2 id="course-package-lectures-title" class="ui-panel__title">{{ _('本节讲义') }} · {{ lectures.length }}</h2></header>
    <div class="ui-panel__body">
      <ol class="course-package-lectures ui-item-list ui-item-list--compact">
        {% for item in lectures %}
        <li id="course-package-lecture-{{ item.pid }}" class="ui-item-list__item">
          <div class="ui-item-list__content">
            <h3 class="ui-item-list__title">{% if item.unavailable %}{{ loop.index }}. P{{ item.pid }}{% else %}<a href="{{ url('problem_detail', pid=item.pid) }}">{{ loop.index }}. {{ item.displayId }} · {{ item.title }}</a>{% endif %}</h3>
            {% if item.unavailable %}<p class="ui-item-list__description">{{ _('讲义不存在、暂无查看权限或受到比赛访问限制。') }}</p>{% endif %}
          </div>
          {% if item.unavailable %}<div class="ui-item-list__aside ui-meta">{{ ui_v1.badge(_('暂时无法查看'), 'warning') }}</div>{% endif %}
        </li>
        {% endfor %}
      </ol>
    </div>
  </section>
  {% endif %}
  <section class="ui-panel ui-panel--continuous" aria-labelledby="course-package-problems-title">
    <header class="ui-panel__header"><h2 id="course-package-problems-title" class="ui-panel__title">{{ _('本节题目') }} · {{ problems.length }}</h2></header>
    <div class="ui-panel__body">
      {% if problems.length %}
      <ol class="course-package-problems ui-item-list ui-item-list--compact">
        {% for item in problems %}
        <li id="course-package-problem-{{ item.pid }}" class="ui-item-list__item">
          <div class="ui-item-list__content">
            <h3 class="ui-item-list__title">{% if item.unavailable %}{{ loop.index }}. P{{ item.pid }}{% else %}<a href="{{ url('problem_detail', pid=item.pid) }}">{{ loop.index }}. {{ item.displayId }} · {{ item.title }}</a>{% endif %}</h3>
            {% if item.unavailable %}<p class="ui-item-list__description">{{ _('题目不存在、暂无查看权限或受到比赛访问限制。') }}</p>{% endif %}
          </div>
          <div class="ui-item-list__aside ui-meta">
            {% if item.unavailable %}{{ ui_v1.badge(_('暂时无法查看'), 'warning') }}{% else %}<span aria-label="{{ _('Difficulty') }}: {{ _(item.difficultyLabel) }}">{{ ui_v1.category_label(_(item.difficultyLabel), item.difficulty) }}</span>{% endif %}
          </div>
        </li>
        {% endfor %}
      </ol>
      {% else %}{{ ui_v1.empty_state(_('本节还没有题目。')) }}{% endif %}
    </div>
  </section>
</main>
{% endblock %}