{% import "components/ui/v1.html" as ui_v1 %}

{% macro render(title, items, kind, actionUrl, toolbarUrl='', toolbarLabel='', emptyLabel='') %}
<section class="ui-panel course-structure-editor" data-course-structure-editor data-course-structure-kind="{{ kind }}" data-course-structure-announcement="{{ _('Moved {0} to position {1}.') }}">
  <header class="ui-panel__header course-structure-editor__header">
    <div class="course-structure-editor__heading">
      <h2 class="ui-panel__title">{{ title }} <span data-ui-help-anchor="course-structure-editor-help-0-{{ kind }}"></span></h2>
      <p data-ui-help="{{ _('Help') }}" data-ui-help-for="course-structure-editor-help-0-{{ kind }}" id="course-structure-help-{{ kind }}" class="ui-muted course-structure-editor__help">
        <span class="nojs--hide">{{ _('Drag the handle or use the move buttons to reorder. On the handle, use Arrow Up, Arrow Down, Home, or End.') }}</span>
        <span class="hasjs--hide">{{ _('Use the move buttons to reorder.') }}</span>
      </p>
    </div>
    {% if toolbarUrl %}
      <a class="button rounded course-structure-editor__toolbar-action" href="{{ toolbarUrl }}">{{ toolbarLabel }}</a>
    {% endif %}
  </header>
  <div class="ui-panel__body">
    <form method="post" action="{{ actionUrl }}" data-course-structure-form>
      <input type="hidden" name="order" value="{%- for item in items -%}{% if kind == 'course' %}{{ item.docId }}{% elif kind == 'section' %}{{ item.docId }}{% else %}{{ item._id }}{% endif %}{% if not loop.last %},{% endif %}{%- endfor -%}" data-course-structure-order>
      <input type="hidden" name="baseline" value="{%- for item in items -%}{% if kind == 'course' %}{{ item.docId }}{% elif kind == 'section' %}{{ item.docId }}{% else %}{{ item._id }}{% endif %}{% if not loop.last %},{% endif %}{%- endfor -%}">
      <input type="hidden" name="manageVisibility" value="1">
      {% if items.length %}
      <ol class="ui-sortable-list course-structure-editor__list" data-course-structure-list>
        {% for item in items %}
          {% if kind == 'course' %}
            {% set itemId = item.docId %}
            {% set itemEditUrl = url('course_edit', cid=item.docId) %}
            {% set itemMeta = _('{0} enrolled').format(item.attend|default(0)) %}
          {% elif kind == 'section' %}
            {% set itemId = item.docId %}
            {% set itemEditUrl = url('course_section_edit', cid=cdoc.docId, csid=item.docId) %}
            {% set itemMeta = _('{0} subsections').format(item.dag.length if item.dag else 0) %}
          {% else %}
            {% set itemId = item._id %}
            {% set itemEditUrl = url('course_subsec_edit', cid=cdoc.docId, csid=csdoc.docId, ssid=item._id) %}
            {% set itemMeta = _('{0} problems').format(item.pids.length if item.pids else 0) %}
          {% endif %}
        <li class="ui-sortable-list__item" data-course-structure-row data-course-structure-id="{{ itemId }}" data-course-structure-title="{{ item.title }}">
          {{ ui_v1.sortable_handle(_('Drag to reorder') ~ ': ' ~ item.title, 'course-structure-help-' ~ kind, items.length > 1, 'nojs--hide') }}
          {{ ui_v1.sortable_index(loop.index) }}
          <div class="ui-sortable-list__content course-structure-editor__content">
            <a class="course-structure-editor__title" href="{{ itemEditUrl }}">{{ item.title }}</a>
            <div class="course-structure-editor__secondary">
              <span class="ui-muted course-structure-editor__meta">{{ itemMeta }}</span>
              <label class="ui-cluster ui-cluster--xs course-structure-editor__visibility">
                <input type="checkbox" name="hiddenChildren" value="{{ itemId }}" aria-label="{{ _('Hide from learners') }}: {{ item.title }}"{% if item.hidden %} checked{% endif %}>
                <span>{{ _('Hide from learners') }}</span>
              </label>
            </div>
          </div>
          <div class="ui-sortable-list__actions">
            {{ ui_v1.sortable_action(_('Move Up'), _('Move Up') ~ ': ' ~ item.title, action='up', disabled=loop.first, button_type='submit', name='move', value=itemId ~ ':up') }}
            {{ ui_v1.sortable_action(_('Move Down'), _('Move Down') ~ ': ' ~ item.title, action='down', disabled=loop.last, button_type='submit', name='move', value=itemId ~ ':down') }}
            {{ ui_v1.sortable_action(_('Edit'), _('Edit') ~ ': ' ~ item.title, href=itemEditUrl) }}
          </div>
        </li>
        {% endfor %}
      </ol>
      <div class="course-structure-editor__footer">
        <span class="ui-muted course-structure-editor__dirty-state" data-course-structure-dirty>{{ _('Unsaved structure changes') }}</span>
        <button type="submit" class="button rounded primary">{{ _('Save Structure') }}</button>
      </div>
      {% else %}
        {{ ui_v1.empty_state(emptyLabel) }}
      {% endif %}
      <p class="ui-sortable-list__status" aria-live="polite" aria-atomic="true" data-course-structure-live></p>
    </form>
  </div>
</section>
{% endmacro %}