{% import "partials/course_visibility_toggle.html" as vis with context %}
{% set expanded = 0 %}
{% set count = 0 %}
{% include "course_inline_order_style.html" %}
<div data-fragment-id="course_detail">   
  {%- for csdoc in csdocs -%}
    {% set count = count + 1 %}
    <div data-heading-extract-to="#menu-item-course_detail" class="training__section collapsed" style="border-top: 1px solid #e4e4e4;">
      <div class="section__header clearfix course-atr-order-row">
        <div class="float-left course-atr-order-main">
          <h1 data-heading id="node-{{ count }}" class="section__title"><a href="{{ url('course_section_detail', cid=cdoc.docId, csid=csdoc.docId) }}">{{ _('Section') }} {{ count }}. {{ csdoc['title'].split('\n')[0] }}</a>{{ vis.badge(csdoc) }}</h1>
        </div>
        <div class="float-right course-atr-order-side">
          <div class="course-atr-order-tools">
          {% if handler.user.hasPerm(perm.PERM_EDIT_DOMAIN) %}
            <form method="post" action="{{ url('course_inline_order_action') }}" class="course-atr-order-controls">
              <input type="hidden" name="kind" value="section">
              <input type="hidden" name="cid" value="{{ cdoc.docId }}">
              <input type="hidden" name="target" value="{{ csdoc.docId }}">
              <button type="submit" name="direction" value="up" title="上移" aria-label="上移"{% if loop.first %} disabled{% endif %}><span class="icon icon-expand_less"></span></button>
              <button type="submit" name="direction" value="down" title="下移" aria-label="下移"{% if loop.last %} disabled{% endif %}><span class="icon icon-expand_more"></span></button>
            </form>
          {% endif %}
          {% if handler.user.hasPerm(perm.PERM_EDIT_TRAINING) %}
            {{ vis.inline('section', csdoc, cdoc.docId, csdoc.docId, '') }}
            <h1 class="section__title">
              <a href="{{ url('course_section_edit', cid=cdoc.docId, csid=csdoc.docId) }}" style="color: #e64c72;">
                <span class="icon icon-edit"></span> {{ _('Edit') }}
              </a>
            </h1>
          {% endif %}
          </div>
        </div>
      </div>
      <div class="section__body">
        <ul class="supplementary dot list">
          <li>
            <a href="javascript:;" name="training__section__expand" class="expanded--hidden"><span class="icon icon-expand_more"></span> {{ _('expand') }}</a>
            <a href="javascript:;" name="training__section__collapse" class="collapsed--hidden"><span class="icon icon-expand_less"></span> {{ _('collapse') }}</a>
          </li>
        </ul>
      </div>
      <div class="training__section__detail" style="display:none;">
        <div class="section__body typo richmedia">
          {{ csdoc.content|default('')|markdown|safe }}
        </div>
      </div>
    </div>
  {%- endfor -%}
  <div class="section__body">&nbsp;<!-- space placeholder --></div>
</div>