{% import "components/ui/v1.html" as ui_v1 %}
<section class="course-package-lessons ui-panel" aria-labelledby="course-package-lessons-title">
  <header class="ui-panel__header">
    <div class="ui-cluster ui-cluster--between">
    <h2 id="course-package-lessons-title" class="ui-panel__title">{{ _('小节') }} · {{ chapter.lessons.length }}</h2>
    {% if canManage %}<a class="rounded button ui-print-hidden" href="{{ url('course_package_lesson_create', cpid=cpdoc.docId, vid=vpdoc.docId, chapterId=chapter.id) }}">{{ _('创建节') }}</a>{% endif %}
    </div>
  </header>
  <div class="ui-panel__body">
    {% if chapter.lessons.length %}
    <ol class="ui-item-list ui-item-list--compact">
      {% for lesson in chapter.lessons %}
      <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_lesson_preview', cpid=cpdoc.docId, vid=vpdoc.docId, chapterId=chapter.id, lessonId=lesson.id) }}">{{ loop.index }}. {{ lesson.title }}</a></h3>
          <div class="ui-meta">
            <span>{{ lesson.pids.length }} {{ _('题目') }}</span>
            {% if lesson.hidden %}{{ ui_v1.badge(_('已隐藏'), 'warning') }}{% endif %}
          </div>
        </div>
        <div class="ui-item-list__aside ui-actions ui-print-hidden">
          <a class="rounded button" href="{{ url('course_package_lesson_preview', cpid=cpdoc.docId, vid=vpdoc.docId, chapterId=chapter.id, lessonId=lesson.id) }}">{{ _('预览') }}</a>
          {% if canManage %}
          <a class="rounded button" href="{{ url('course_package_lesson_edit', cpid=cpdoc.docId, vid=vpdoc.docId, chapterId=chapter.id, lessonId=lesson.id) }}">{{ _('编辑') }}</a>
          <form method="post" action="{{ url('course_package_version_detail', cpid=cpdoc.docId, vid=vpdoc.docId) }}">
            <input type="hidden" name="csrfToken" value="{{ handler.csrfToken }}">
            <input type="hidden" name="operation" value="toggle_lesson_hidden">
            <input type="hidden" name="chapterId" value="{{ chapter.id }}">
            <input type="hidden" name="lessonId" value="{{ lesson.id }}">
            <button type="submit" class="rounded button">{{ _('显示') if lesson.hidden else _('隐藏') }}</button>
          </form>
          {% endif %}
        </div>
      </li>
      {% endfor %}
    </ol>
    {% else %}{{ ui_v1.empty_state(_('本章还没有节。')) }}{% endif %}
  </div>
</section>