{% extends "layout/basic.html" %}
{% block content %}
{% include "course_ui_style.html" %}
<div class="row course-ui-page">
  <div class="medium-12 columns ui-stack">
    <div class="section ui-panel">
      <div class="section__header">
        <h1 class="section__title">{{ _('Edit Subsection') if page_name == 'course_subsec_edit' else _('Create Subsection') }}</h1>
      </div>
      <div class="section__body">
        <form method="post" class="course-editor-form">
          <div class="row">
            <div class="columns">
              <label>
                {{ _('Title') }}
                <input name="title" placeholder="{{ _('Enter a subsection title') }}" value="{{ ssdoc.title|default('') }}" class="textbox" autofocus>
              </label>
            </div>
          </div>
          <div class="row">
            <div class="medium-12 columns form__item end">
              <label for="course-subsection-problem-ids" data-problem-set-selector-label>{{ _('Problem') }}</label>
              <input
                id="course-subsection-problem-ids"
                type="text"
                name="pids"
                value="{{ ssdoc.pids|join(', ') if ssdoc and ssdoc.pids else '' }}"
                placeholder="{{ _('Problem IDs separated by commas, e.g. 1001,1002') }}"
                class="textbox"
                data-problem-set-selector-source
                data-sequence-mode="numeric"
                data-sort-by-pid
              >
              <div data-problem-set-selector></div>
              <p class="ui-field__help">{{ _('Problem order determines course display and scoring.') }}</p>
            </div>
          </div>
          <div class="row">
            <div class="columns">
              <label>
                {{ _('Description') }}
                <textarea name="content" class="textbox" data-markdown>{{ ssdoc['content']|default('') }}</textarea>
              </label>
            </div>
          </div>
          <input type="hidden" name="manageVisibility" value="1">
          <label class="course-editor-form__visibility">
            <input type="checkbox" name="hidden" value="1"{% if ssdoc.hidden %} checked{% endif %}>
            <span>{{ _('Hide this subsection from learners') }}</span>
          </label>
          <div class="row">
            <div class="columns">
              {% if page_name == 'course_subsec_edit' %}
              <button type="submit" class="rounded primary button">{{ _('Update') }}</button>
              {% if canEdit %}
              <button name="operation" value="delete" type="submit" formaction="." class="rounded button">{{ _('Delete') }}</button>
              {% endif %}
              {% else %}
              <button type="submit" class="rounded primary button">{{ _('Create') }}</button>
              {% endif %}
              <button type="button" class="rounded button" onclick="window.history.go(-1)">{{ _('Cancel') }}</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>

</div>
{% endblock %}