{% import "partials/course_visibility_toggle.html" as vis with context %}
{% set expanded = 0 %}
{% set count = 0 %}
<div data-fragment-id="course_detail" class="ui-panel__body ui-stack ui-stack--sm">
  {%- for csdoc in csdocs -%}
    {% set count = count + 1 %}
    <div data-heading-extract-to="#menu-item-course_detail" class="training__section collapsed ui-card course-ui__section-row">
      <div class="section__header clearfix course-atr-order-row">
        <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="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">
        <div class="section__body typo richmedia">
          {{ csdoc.content|default('')|markdown|safe }}
        </div>
      </div>
    </div>
  {%- endfor -%}
</div>