{% import "components/ui/v1.html" as ui_v1 %}
{% extends "layout/basic.html" %}
{% block content %}
{% set pageTitle = _('编辑节') if lesson else _('创建节') %}
<main class="course-package-ui course-package-lesson-edit ui-page ui-page--padded ui-page--compact-type ui-stack ui-stack--lg">
  {% call ui_v1.page_header(pageTitle, _('维护节内容、计分题目、标签和可见性。')) %}
    {% if lesson %}<a class="rounded button" href="{{ url('course_package_lesson_preview', cpid=cpdoc.docId, vid=vpdoc.docId, chapterId=chapter.id, lessonId=lesson.id) }}">{{ _('预览') }}</a>{% endif %}
  {% endcall %}
  <div class="ui-split">
    <div class="ui-panel">
      <div class="ui-panel__body ui-stack">
        <form method="post" class="ui-stack">
          <div class="ui-grid ui-grid--2">
            <label class="ui-field">
              <span class="ui-field__label">{{ _('Title') }}</span>
              <input name="title" value="{{ lesson.title|default('') }}" class="textbox ui-field__control" autofocus>
            </label>
            <label class="ui-field">
              <span class="ui-field__label">{{ _('标签') }}</span>
              <input name="tags" value="{{ lesson.tags|join(', ') if lesson and lesson.tags else '' }}" class="textbox ui-field__control">
            </label>
          </div>
          <div class="ui-field">
            <label id="course-package-lesson-problem-label" class="ui-field__label" for="course-package-lesson-problem-ids" data-problem-set-selector-label>{{ _('Problems') }}</label>
            <input
              id="course-package-lesson-problem-ids"
              type="text"
              name="pids"
              value="{{ lesson.pids|join(', ') if lesson and lesson.pids else '' }}"
              placeholder="{{ _('Comma-separated problem IDs') }}"
              class="textbox ui-field__control"
              data-problem-set-selector-source
              data-sequence-mode="numeric"
              data-sort-by-pid
              aria-describedby="course-package-lesson-problem-help"
            >
            <div data-problem-set-selector></div>
            <noscript><p id="course-package-lesson-problem-help" class="ui-field__help">{{ _('Comma-separated problem IDs') }}</p></noscript>
          </div>
          <label class="ui-field">
            <span class="ui-field__label">{{ _('Description') }}</span>
            <textarea name="content" class="textbox ui-field__control course-package-ui__markdown" data-markdown>{{ lesson.content|default('') }}</textarea>
          </label>
          <label class="course-package-ui__checkbox">
            <input type="checkbox" name="hidden" value="true"{% if lesson and lesson.hidden %} checked{% endif %}>
            <span>{{ _('隐藏本节') }}</span>
          </label>
          <p class="ui-muted ui-mt-0">{{ _('隐藏后普通用户不可见，域管理员仍可编辑和恢复显示。') }}</p>
          <div class="ui-actions ui-actions--start">
            {% if lesson %}
            <button type="submit" class="rounded primary button">{{ _('Update') }}</button>
            <button name="operation" value="delete" type="submit" class="rounded button">{{ _('Delete') }}</button>
            {% else %}
            <button type="submit" class="rounded primary button">{{ _('Create') }}</button>
            {% endif %}
            <a class="rounded button" href="{{ url('course_package_chapter_preview', cpid=cpdoc.docId, vid=vpdoc.docId, chapterId=chapter.id) }}">{{ _('Cancel') }}</a>
          </div>
        </form>
        {# Optional integration slot. The video addon owns its component and never nests a form here. #}
        <div data-course-video-slot></div>
      </div>
    </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 ui-stack ui-stack--sm">
          <p class="ui-panel__description ui-mb-0">{{ _('章') }}: {{ chapter.title }}</p>
          <a href="{{ url('problem_create') }}" class="rounded button" target="_blank" rel="noopener"><span class="icon icon-add" aria-hidden="true"></span> {{ _('创建题目') }}</a>
        </div>
      </section>
    </aside>
  </div>
</main>
{% endblock %}