{% set page_name = "training_main" %}
{% extends "layout/basic.html" %}
{% block content %}
<div class="row">
  <div class="large-9 columns">
    <div class="section">
      <div class="section__header">
        <h1 class="section__title">{{ _('All Training Plans') }}</h1>
      </div>
    {% if not tdocs.length %}
      {{ nothing.render('Sorry, there is no training plan.') }}
    {% else %}
      <ol class="section__list all primary training__list">
        {% for tdoc in tdocs %}
        <li class="section__list__item training__item">
          <div class="media">
            <div class="media__left middle">
              <div class="training__participants numbox">
                <div class="numbox__num large">{{ tdoc.enroll|default(0) }}</div>
                <div class="numbox__text">{{ _('Enrolled') }}</div>
              </div>
            </div>
            <div class="media__body middle">
              <h1 class="training__title"><a href="/t/{{ tdoc.docId }}" data-emoji-enabled>{{ tdoc.title }}</a></h1>
              <div class="training__intro typo">
                <p>{{ tdoc['content'] }}</p>
              </div>
              <ul class="supplementary list training__progress">
                <li>
                  <span class="icon icon-flag text-blue"></span> {{ _('{0} sections').format(tdoc['dag']|length) }}, {{ _('{0} problems').format(model.training.getPids(tdoc)|length) }}
                </li>
                <li>
                {% if tsdict[tdoc.docId]['enroll'] %}
                  {% if not tsdict[tdoc.docId]['done'] %}
                  <span class="icon training-status--icon progress"></span>
                  <span class="training-status--text progress">{{ _('Completed') }} {{ (100 * tsdict[tdoc.docId]['done_pids']|length / model.training.getPids(tdoc)|length)|round|int }}%</span>
                  {% else %}
                  <span class="icon training-status--icon done"></span>
                  <span class="training-status--text done">{{ _('Completed') }} 100%</span>
                  {% endif %}
                {% elif handler.hasPerm(perm.PERM_LOGGEDIN) %}
                  <span class="icon training-status--icon outside"></span> <span class="training-status--text outside">{{ _('Not Enrolled') }}</span>
                {% endif %}
                </li>
              </ul>
            </div>
          </div>
        </li>
        {% endfor %}
      </ol>
      {{ paginator.render(page, tpcount, add_qs=qs) }}
    {% endif %}
    </div>
  </div>
  <div class="large-3 columns">
  {% if handler.hasPerm(perm.PERM_LOGGEDIN) %}
    <div class="section side">
      <div class="section__header">
        <h1 class="section__title">{{ _('Enrolled') }}</h1>
      </div>
      <div class="section__body">
        <ol class="my secondary training__list">
        {% for tsdoc in tsdict %}
        {% if tsdoc['enroll'] %}
          <li class="training__item"><div class="media">
            <div class="media__left">
              <span class="icon training-status--icon {% if tsdoc['done'] %}done{% else %}progress{% endif %}"></span>
            </div>
            <div class="media__body">
              <h1 class="training__title"><a href="/t/{{ tsdoc.tid }}" data-emoji-enabled>{{ tdict[tsdoc['tid']]['title'] }}</a></h1>
              <div class="supplementary training__progress"><div class="training__progress-bar"><div class="training__progress-track" style="width:{{ (100 * tsdoc['donePids']|length / model.training.getPids(tdict[tsdoc['tid']])|length)|round|int }}%;"></div></div> {{ _('Complete') }} {{ (100 * tsdoc['done_pids']|length / handler.get_pids(tdict[tsdoc['doc_id']])|length)|round|int }}%</div>
            </div>
          </div></li>
        {% endif %}
        {% endfor %}
        </ol>
      </div>
    </div>
  {% endif %}
  {% if handler.hasPerm(perm.PERM_CREATE_TRAINING) %}
    <div class="section side">
      <div class="section__header">
        <h1 class="section__title">{{ _('Create Training Plan') }}</h1>
      </div>
      <ol class="menu">
        <li class="menu__item">
          <a href="/training/create" class="menu__link"><span class="icon icon-add"></span> {{ _('New Training Plan') }}</a>
        </li>
      </ol>
      <div class="section__body">
        <div class="typo supplementary">
          <p>{{ _('You can create your own training plans and share with others.') }}</p>
        </div>
      </div>
    </div>
  {% endif %}
  </div>
</div>
{% endblock %}