{% set tdocs = payload[0] %}
{% set tsdict = payload[1] %}
{% if tdocs.length %}
  <div class="section page--training_main">
    <div class="section__header">
      <h1 class="section__title">{{ _('Training') }}</h1>
    </div>
    <ol class="section__list training__list">
      {%- for tdoc in tdocs -%}
        {% set pcount = model.training.getPids(tdoc.dag)|length %}
        <li class="section__list__item training__item">
          <div class="media">
            <div class="media__body medium">
              <h1 class="training__title"><a href="{{ url('training_detail', tid=tdoc.docId) }}" data-emoji-enabled>{{ tdoc.title }}</a></h1>
              <ul class="supplementary list">
                <li><span class="icon icon-flag"></span> {{ _('{0} sections').format(tdoc['dag']|length) }}, {{ _('{0} problems').format(pcount) }}</li>
                <li><span class="icon icon-user--multiple"></span> {{ tdoc.attend|default(0) }} {{ _('Enrolled') }}</li>
              </ul>
              {% if tsdict[tdoc.docId]['enroll'] %}
                {% set progress = (100 * tsdict[tdoc.docId]['donePids']|length / pcount)|round|int if not tsdict[tdoc.docId]['done'] else 100 %}
                <div class="fork-bar"><div class="fork-bar__fill{% if progress >= 100 %} fork-bar__fill--ok{% else %} fork-bar__fill--primary{% endif %}" style="width:{{ progress }}%;"></div></div>
              {% endif %}
            </div>
          </div>
        </li>
      {%- endfor -%}
    </ol>
    <ul class="pager pager-bottom"><li>
      <a class="pager__item next link" href="{{ url('training_main') }}">{{ _('More') }} ></a>
    </li></ul>
  </div>
{% endif %}